Kas ir CSS Grid?
CSS Grid Layout ir divdimensiju izkārtojuma sistēma, kas ir iebūvēta mūsdienu pārlūkprogrammās. Jūs definējat tīkla konteineru ar display: grid, pēc tam kontrolējat kolonnas ar grid-template-columns un rindas ar grid-template-rows. Daļskaitļu vienības (fr) proporcionāli sadala pieejamo vietu. Pakārtotie elementi var aptvert vairākas kolonnas vai rindas, izmantojot grid-column: span N un grid-row: span N.
Kā lietot CSS Grid Ģeneratoru
-
Iestatiet kolonnu un rindu skaitu, izmantojot skaitliskos ievades laukus (1–12 katram).
-
Pielāgojiet grid-template-columns un grid-template-rows, lai kontrolētu izmērus (piemēram: 1fr 2fr, 200px auto).
-
Iestatiet atstarpi starp šūnām (piemēram: 10px, 1rem).
-
Noklikšķiniet uz jebkuras šūnas priekšskatījumā, lai to atlasītu (kļūst oranža).
-
Šūnas apjoma panelī iestatiet col-span un row-span, pēc tam noklikšķiniet Lietot. Šūnas ar apjomu kļūst zaļas.
-
Noklikšķiniet uz CSS vai HTML cilnes, lai mainītu izvades formātu, pēc tam kopējiet starpliktuvē.
-
Noklikšķiniet Atiestatīt visu, lai sāktu no jauna ar jaunu 3×3 tīklu.