Una quadrícula es pot definir com un conjunt intersecant de línies verticals i horitzontals. El disseny de quadrícula CSS separa una pàgina en seccions principals. La propietat Grid ofereix un sistema de disseny basat en quadrícula amb files i columnes. Facilita el disseny de pàgines web sense posicionament ni flotant. El disseny de la quadrícula ens ofereix una manera de crear estructures de quadrícula representades en CSS, no en HTML.

De manera similar a la taula, permet a l'usuari alinear els elements en files i columnes. Però en comparació amb les taules, és fàcil dissenyar un disseny amb la graella CSS. Podem definir columnes i files a la graella utilitzant files-plantilla-quadrícula i columnes-plantilla-quadrícula propietats.

Es pot crear un contenidor de quadrícula declarant el pantalla: quadrícula o pantalla: quadrícula en línia sobre un element. El contenidor de quadrícula conté els elements d'una quadrícula que es col·loquen dins de les files i columnes.

Grid v/s Flexbox

És una pregunta comuna que sorgeix generalment que la quadrícula és diferent de la caixa flexible. La quadrícula és per a dissenys bidimensionals (files i columnes al mateix temps), mentre que el flexbox s'utilitza per a dissenys unidimensionals (ja sigui en fila o columna). Flexbox s'utilitza quan qualsevol cosa ha d'estar en línia recta.

Flexbox s'utilitza per organitzar els elements en una sola columna o en una sola fila. D'altra banda, la quadrícula és millor per organitzar els elements en les múltiples columnes i files.

Entenem la graella en CSS utilitzant un exemple.

Exemple

 .main { display: grid; grid: auto auto / auto auto auto auto; grid-gap: 10px; background-color: blue; padding: 10px; } .num { background-color: lightblue; text-align: center; color: black; padding: 10px 10px; font-size: 30px; } One Two Three Four Five Six Seven Eight 

Sortida