CSS Grid ni Nini?
CSS Grid Layout ni mfumo wa kupanga vipande vya pande mbili uliojengwa ndani ya vivinjari vya kisasa. Unafafanua chombo cha gridi kwa kutumia display: grid, kisha kudhibiti safu wima kwa grid-template-columns na safu mlalo kwa grid-template-rows. Vitengo vya sehemu (fr) vinagawanya nafasi inayopatikana kwa uwiano. Vipande vya watoto vinaweza kupanuka juu ya safu wima au mlalo nyingi kwa kutumia grid-column: span N na grid-row: span N.
Jinsi ya Kutumia Kizalishi cha CSS Grid
-
Weka idadi ya safu wima na mlalo kwa kutumia visanduku vya nambari (1–12 kwa kila kimoja).
-
Rekebisha grid-template-columns na grid-template-rows kudhibiti vipimo (mfano: 1fr 2fr, 200px auto).
-
Weka nafasi kati ya seli (mfano: 10px, 1rem).
-
Bonyeza seli yoyote katika muhtasari kuichagua (inageuka rangi ya machungwa).
-
Weka col-span na row-span katika jopo la Upanuzi wa Seli, kisha bonyeza Tekeleza. Seli zilizopanuliwa zinageuka kijani.
-
Bonyeza kichupo cha CSS au HTML kubadilisha umbizo la matokeo, kisha Nakili kwenye ubao wa kunakili.
-
Bonyeza Rejesha Yote kuanza upya na gridi mpya ya 3×3.