1–12
1–12
ምሳሌ፦ 1fr 1fr 1fr፣ 200px 1fr፣ repeat(3,1fr)
ምሳሌ፦ auto፣ 100px auto፣ repeat(3,80px)
ሴል ስፋት (ሴል ይምረጡ)
የተዘረጉ ሴሎች በአረንጓዴ ቀለም ይታያሉ።
ሴል ለመምረጥ ጠቅ ያድርጉ፣ ከዚያ ከታች ዓምድ/ረድፍ ስፋት ያዘጋጁ።
የተፈጠረ CSS
CSS Grid ምንድን ነው?
CSS Grid Layout በዘመናዊ አሳሾች ውስጥ የተካተተ ሁለት-አቅጣጫዊ አቀማመጥ ስርዓት ነው። display: grid ን ይጠቀሙ፣ ከዚያ ዓምዶችን በgrid-template-columns እና ረድፎችን በgrid-template-rows ይቆጣጠሩ። ክፍልፋይ ክፍሎች (fr) ክፍት ቦታን ተመጣጣኝ በሆነ መልኩ ያሰራጫሉ። የልጆች ንጥሎች grid-column: span N እና grid-row: span N ን በመጠቀም ብዙ ዓምዶችን ወይም ረድፎችን ሊሸፍኑ ይችላሉ።
CSS Grid መፍጠሪያን እንዴት መጠቀም እንደሚቻል
-
የቁጥር ግቤቶቹን (እያንዳንዱ 1–12) በመጠቀም የዓምዶቹን እና ረድፎቹን ቁጥር ያዘጋጁ።
-
መጠኖችን ለመቆጣጠር grid-template-columns እና grid-template-rows ያስተካክሉ (ምሳሌ፦ 1fr 2fr፣ 200px auto)።
-
በሴሎች መካከል ያለውን ክፍተት ያዘጋጁ (ምሳሌ፦ 10px፣ 1rem)።
-
ለመምረጥ ቅድመ-እይታ ውስጥ ማንኛውም ሴል ጠቅ ያድርጉ (ብርቱካናማ ይሆናል)።
-
የሴል ስፋት ፓነል ውስጥ col-span እና row-span ያዘጋጁ፣ ከዚያ ተግብር ጠቅ ያድርጉ። የተዘረጉ ሴሎች አረንጓዴ ይሆናሉ።
-
ውፅዓት ቅርጸቱን ለመቀየር CSS ወይም HTML ትር ጠቅ ያድርጉ፣ ከዚያ ወደ ቁርጠቦርዱ ቅዳ።
-
አዲስ 3×3 ዳሳሽ ጋር ለመጀመር ሁሉንም ዳግም አስጀምር ጠቅ ያድርጉ።