Kas yra CSS Grid?
CSS Grid Layout yra dvimatė išdėstymo sistema, įmontuota į modernius naršykles. Apibrėžiate tinklelio konteinerį naudodami display: grid, tada valdote stulpelius su grid-template-columns ir eilutes su grid-template-rows. Trupmeniniai vienetai (fr) proporcingai paskirsto galimą vietą. Vaiko elementai gali apimti kelis stulpelius arba eilutes naudodami grid-column: span N ir grid-row: span N.
Kaip naudoti CSS Grid Generatorių
-
Nustatykite stulpelių ir eilučių skaičių naudodami skaičių įvestis (1–12 kiekvienam).
-
Koreguokite grid-template-columns ir grid-template-rows dydžiams valdyti (pvz. 1fr 2fr, 200px auto).
-
Nustatykite tarpą tarp langelių (pvz. 10px, 1rem).
-
Spustelėkite bet kurį langelį peržiūroje, kad jį pasirinktumėte (tampa oranžinis).
-
Nustatykite col-span ir row-span langelio apimties skydelyje, tada spustelėkite Taikyti. Apimties langeliai tampa žali.
-
Spustelėkite CSS arba HTML skirtuką, kad pakeistumėte išvesties formatą, tada nukopijuokite į iškarpinę.
-
Spustelėkite Atstatyti viską, kad pradėtumėte iš naujo su nauju 3×3 tinkleliu.