CSS Grid és un sistema de disseny potent i flexible que permet crear dissenys de pàgines web complexos i responsius amb facilitat. A diferència d'altres mètodes de disseny com Flexbox, que se centra en l'alineació d'elements en una sola dimensió (fila o columna), CSS Grid permet treballar en dues dimensions (files i columnes) simultàniament.

Abans de començar a utilitzar CSS Grid, és important comprendre alguns conceptes bàsics:

1. Contenidor Grid: L'element que conté els elements grid. Es defineix establint la propietat display: grid o display: inline-grid en un element.
2. Elements Grid: Els elements fills directes del contenidor grid. Aquests elements es col·loquen dins de la graella definida pel contenidor grid.
3. Tracks: Les files i columnes de la graella.
4. Grid Lines: Les línies que divideixen les files i columnes de la graella.
5. Grid Areas: Àrees rectangulars dins de la graella que poden ser ocupades per un o més elements grid.

Per definir un contenidor grid, simplement afegeix la propietat display: grid a l'element HTML:

Utilitza les propietats grid-template-columns i grid-template-rows per definir el nombre i la mida de les columnes i files:

Aquest exemple crea una graella amb dues columnes (100px i 200px d'amplada) i dues files (ambdues de 100px d'alçada).

Els elements grid es col·loquen automàticament dins de la graella segons l'ordre en què apareixen en el codi HTML. No obstant això, pots especificar la posició exacta d'un element utilitzant les propietats grid-column i grid-row:

A continuació, es mostra un exemple pràctic d'ús de CSS Grid per crear un disseny senzill:

1. Contenidor Grid: Definim .grid-container com un contenidor grid amb display: grid.
2. Columnes i Files: Utilitzem grid-template-columns per definir tres columnes amb amplades relatives (1fr 2fr 1fr). Això significa que la segona columna serà el doble d'ampla que les altres dues.
3. Espaiat: Utilitzem gap per afegir espai entre els elements grid.
4. Elements Grid: Cada .grid-item és un element grid que es col·loca automàticament dins de la graella.

Crea una pàgina HTML amb una graella de 3x3 on cada cel·la contingui un número del 1 al 9. Les cel·les han de tenir una mida de 100px x 100px i un espai de 10px entre elles.

1. Contenidor Grid: Definim .grid-container com un contenidor grid amb display: grid.
2. Columnes i Files: Utilitzem grid-template-columns i grid-template-rows amb repeat(3, 100px) per crear tres columnes i tres files de 100px cadascuna.
3. Espaiat: Utilitzem gap per afegir 10px d'espai entre les cel·les.
4. Elements Grid: Cada .grid-item és un element grid que es col·loca automàticament dins de la graella. Utilitzem display: flex, align-items: center i justify-content: center per centrar el text dins de cada cel·la.

CSS Grid és una eina poderosa per crear dissenys de pàgines web complexos i responsius. Amb els conceptes bàsics i la sintaxi que hem cobert en aquesta introducció, ja pots començar a experimentar amb CSS Grid i crear els teus propis dissenys. En els següents temes, explorarem més a fons les propietats del contenidor grid i dels elements grid per obtenir un control encara més gran sobre els teus dissenys.