የCSS Grid ጀነሬተር
አምዶችዎን እና ረድፎችዎን ያዘጋጁ፣ አይተሞችን ለማስቀመጥ በሴሎች ላይ ይጎትቱ፣ እና የgrid CSS ኮዱን ከተዛማጅ HTML ጋር በአንድ ጠቅታ ይቅዱ።
የእርስዎ grid የሚሰራው በቀጥታ በብሮውዘርዎ ላይ ነው። እዚህ የሚያዘጋጁት ማንኛውም ነገር ወደ BroBroGo አይሰቀልም።
በተደጋጋሚ የሚነሱ ጥያቄዎች
በgrid ላይ አይተሞችን እንዴት ማስቀመጥ እችላለሁ?
በሴሎች ላይ ተጭነው በመጎተት አራት ማዕዘን ቅርጽ ይሳሉ — ሲለቁት እነዚያን አምዶች እና ረድፎች የሚሸፍን የተቀመጠ አይተም (child) ይሆናል። እያንዳንዱ የሳሉት አይተም በCSS ውስጥ የራሱ grid-column እና grid-row ህግ እንዲሁም በHTML ውስጥ ተዛማጅ div ያገኛል። አይተሞች ሊደራረቡ ይችላሉ፣ እና ዘግይቶ የተሳለው ከላይ ይቀመጣል፤ አይተምን ለማስወገድ በላዩ ላይ ያለውን × ይጠቀሙ።
አምዶች እና ረድፎች የተለያየ መጠን ሊኖራቸው ይችላል?
አዎ። እያንዳንዱ ትራክ የራሱ የመጠን ሳጥን አለው፣ እና እዚያ ማንኛውንም የgrid እሴት መጻፍ ይችላሉ — 1fr, 200px, auto, min-content ወይም minmax(120px, 1fr)። ተመሳሳይ መጠን ያላቸው ትራኮች ውጤቱ አጭር እንዲሆን በrepeat() ውስጥ ይጠቀለላሉ። Column gap እና row gap ለየብቻ የሚዘጋጁ ሲሆን፣ እኩል ሲሆኑ ደግሞ ወደ አንድ gap ይጠቀለላሉ።
ከተፈጠረው ኮድ ጋር ምን አደርጋለሁ?
የCSS እና የHTML ኮዶችን ጎን ለጎን ይቅዱ። HTML ኮዱ ለእያንዳንዱ አይተም አንድ div የያዘ ኮንቴይነር ይሰጥዎታል፣ CSS ኮዱ ደግሞ gridዱን ይገልፃል እና የእያንዳንዱን አይተም ቦታ ይወስናል። ሁለቱንም ወደ ፕሮጀክትዎ ሲለጥፉ እዚህ የሳሉትን ተመሳሳይ አቀማመጥ ያገኛሉ።