Mi az a CSS Grid?
A CSS Grid Layout egy kétdimenziós elrendezési rendszer, amely be van építve a modern böngészőkbe. Definiál egy rácskonténert a display: grid segítségével, majd az oszlopokat grid-template-columns-szal, a sorokat grid-template-rows-szal vezérli. A töredékegységek (fr) arányosan osztják el a rendelkezésre álló helyet. A gyerekelemek több oszlopot vagy sort is átfoghatnak a grid-column: span N és grid-row: span N segítségével.
A CSS Grid Generátor használata
-
Állítsa be az oszlopok és sorok számát a számbeviteli mezőkkel (mindkettőnél 1–12).
-
Módosítsa a grid-template-columns és grid-template-rows értékeket a méretek szabályozásához (pl. 1fr 2fr, 200px auto).
-
Állítsa be a cellák közötti térközt (pl. 10px, 1rem).
-
Kattintson bármely cellára az előnézetben a kijelöléséhez (narancssárgává válik).
-
Állítsa be a col-span és row-span értékeket a Cellakiterjedés panelen, majd kattintson az Alkalmaz gombra. A kiterjedő cellák zölddé válnak.
-
Kattintson a CSS vagy HTML fülre a kimeneti formátum váltásához, majd másolja a vágólapra.
-
Kattintson a Mindent visszaállít gombra, hogy egy friss 3×3-as ráccsal kezdje újra.