Ce este CSS Grid?
CSS Grid Layout este un sistem de aspect bidimensional încorporat în browserele moderne. Definiți un container de grilă cu display: grid, apoi controlați coloanele cu grid-template-columns și rândurile cu grid-template-rows. Unitățile fracționale (fr) distribuie spațiul disponibil proporțional. Elementele copil pot acoperi mai multe coloane sau rânduri folosind grid-column: span N și grid-row: span N.
Cum se folosește Generatorul CSS Grid
-
Setați numărul de coloane și rânduri folosind câmpurile numerice (1–12 pentru fiecare).
-
Ajustați grid-template-columns și grid-template-rows pentru a controla dimensiunile (ex. 1fr 2fr, 200px auto).
-
Setați spațiul dintre celule (ex. 10px, 1rem).
-
Faceți clic pe orice celulă din previzualizare pentru a o selecta (devine portocalie).
-
Setați col-span și row-span în panoul Întinderea celulei, apoi faceți clic pe Aplică. Celulele cu întindere devin verzi.
-
Faceți clic pe fila CSS sau HTML pentru a schimba formatul de output, apoi Copiați în clipboard.
-
Faceți clic pe Resetează tot pentru a reîncepe cu o nouă grilă 3×3.