El disseny de graella CSS (CSS Grid Layout) és una tècnica poderosa que permet crear dissenys web complexos i responsius amb facilitat. A diferència de Flexbox, que és ideal per a dissenys unidimensionals, CSS Grid és perfecte per a dissenys bidimensionals, ja que permet controlar tant les files com les columnes.

1. Contenidor de Graella (Grid Container):

   • És l'element que conté la graella. Qualsevol element fill d'aquest contenidor es converteix en un element de graella.
   • Per definir un contenidor de graella, s'utilitza la propietat display: grid;.

2. Elements de Graella (Grid Items):

   • Són els elements fills directes del contenidor de graella.
   • Aquests elements es col·loquen automàticament en la graella segons les regles definides.

3. Tracks de Graella:

   • Són les files i columnes que formen la graella.

4. Àrees de Graella:

   • Són seccions de la graella que poden contenir un o més elements de graella.

• grid-template-columns i grid-template-rows: Defineixen el nombre i la mida de les columnes i files de la graella.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 100px 200px;
  }
  

• grid-gap: Defineix l'espai entre les files i columnes.

  .grid-container {
    grid-gap: 10px;
  }
  

• justify-items i align-items: Controlen l'aliniació dels elements de graella dins de les seves cel·les.

  .grid-container {
    justify-items: center;
    align-items: center;
  }
  

• grid-column i grid-row: Permeten especificar en quina fila o columna ha d'estar un element de graella.

  .grid-item {
    grid-column: 1 / 3; /* De la columna 1 a la 3 */
    grid-row: 1 / 2;    /* De la fila 1 a la 2 */
  }
  

A continuació, es mostra un exemple pràctic d'un disseny de graella CSS:

Objectiu: Crea una graella amb 3 columnes i 2 files, on cada cel·la tingui un color diferent.

El disseny de graella CSS és una eina essencial per a qualsevol desenvolupador web que vulgui crear dissenys complexos i responsius de manera eficient. Amb la seva capacitat per controlar tant les files com les columnes, ofereix una flexibilitat sense precedents en la disposició dels elements. Practicar amb diferents configuracions de graella ajudarà a comprendre millor el seu potencial i aplicació en projectes reals.