Què és CSS Grid?
CSS Grid Layout és un sistema de disseny bidimensional integrat als navegadors moderns. Definiu un contenidor de quadrícula amb display: grid, i controleu les columnes amb grid-template-columns i les files amb grid-template-rows. Les unitats fraccionàries (fr) distribueixen l'espai disponible proporcionalment. Els elements fills poden abastar múltiples columnes o files amb grid-column: span N i grid-row: span N.
Com utilitzar el Generador de CSS Grid
-
Establiu el nombre de columnes i files utilitzant els camps numèrics (1–12 cadascun).
-
Ajusteu grid-template-columns i grid-template-rows per controlar les mides (p. ex. 1fr 2fr, 200px auto).
-
Configureu l'espai entre cel·les (p. ex. 10px, 1rem).
-
Feu clic a qualsevol cel·la de la previsualització per seleccionar-la (es torna taronja).
-
Configureu col-span i row-span al panell Abast de cel·la, i feu clic a Aplicar. Les cel·les amb abast es tornen verdes.
-
Feu clic a la pestanya CSS o HTML per canviar el format de sortida, i copieu al porta-retalls.
-
Feu clic a Restablir tot per començar de nou amb una quadrícula 3×3 nova.