El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem com utilitzar CSS Grid per crear dissenys complexos i responsius de manera eficient. CSS Grid és una eina poderosa que permet organitzar el contingut en una estructura de quadrícula, facilitant la creació de dissenys flexibles i adaptables.

Configuració Bàsica del Contenidor Grid

Definir un Contenidor Grid

Per començar a utilitzar CSS Grid, primer hem de definir un contenidor grid. Això es fa aplicant la propietat display: grid; a l'element contenidor.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
}

Definir les Files i Columnes

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

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

Aquest codi crea una quadrícula amb 3 columnes de 100px d'ample cadascuna i 2 files de 100px d'altura cadascuna.

Utilitzar Unitats Flexibles

Podem utilitzar unitats flexibles com fr (fracció) per crear dissenys més flexibles.

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

Aquest codi crea una quadrícula amb 3 columnes on la primera i la tercera ocupen una fracció de l'espai disponible i la segona columna ocupa dues fraccions.

Posicionar Elements en la Quadrícula

Posicionar Elements per Nom de Línia

Podem posicionar elements específics en la quadrícula utilitzant els noms de línia.

.grid-item:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

Aquest codi fa que el primer element ocupi des de la primera columna fins a la tercera columna i des de la primera fila fins a la segona fila.

Posicionar Elements per Àrea Nom

Podem definir àrees de la quadrícula i assignar elements a aquestes àrees.

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.grid-item:nth-child(1) { grid-area: header; }
.grid-item:nth-child(2) { grid-area: sidebar; }
.grid-item:nth-child(3) { grid-area: content; }
.grid-item:nth-child(4) { grid-area: footer; }

Aquest codi defineix una quadrícula amb àrees anomenades header, sidebar, content i footer, i assigna els elements a aquestes àrees.

Disseny Responsiu amb CSS Grid

Utilitzar Consultes de Mitjans

Podem utilitzar consultes de mitjans per adaptar el disseny de la quadrícula a diferents mides de pantalla.

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Aquest codi defineix una quadrícula amb una columna per defecte, dues columnes per pantalles de més de 600px d'ample i tres columnes per pantalles de més de 900px d'ample.

Exercicis Pràctics

Exercici 1: Crear una Quadrícula Bàsica

Crea una quadrícula amb 4 columnes i 3 files, on cada cel·la tingui una mida de 100px x 100px.

Solució:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
  <div class="grid-item">10</div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(3, 100px);
}

Exercici 2: Crear un Disseny Responsiu

Crea una quadrícula que tingui una columna per defecte, dues columnes per pantalles de més de 600px d'ample i tres columnes per pantalles de més de 900px d'ample.

Solució:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .grid-container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Conclusió

CSS Grid és una eina poderosa per crear dissenys complexos i responsius. Amb les propietats i tècniques que hem après, podem crear estructures de pàgina flexibles i adaptables a diferents mides de pantalla. Practica amb els exercicis proporcionats per consolidar els teus coneixements i experimenta amb diferents configuracions per veure com pots utilitzar CSS Grid en els teus projectes.

Crear Dissenys amb CSS Grid

Configuració Bàsica del Contenidor Grid

Definir un Contenidor Grid

Definir les Files i Columnes

Utilitzar Unitats Flexibles

Posicionar Elements en la Quadrícula

Posicionar Elements per Nom de Línia

Posicionar Elements per Àrea Nom

Disseny Responsiu amb CSS Grid

Utilitzar Consultes de Mitjans

Exercicis Pràctics

Exercici 1: Crear una Quadrícula Bàsica

Solució:

Exercici 2: Crear un Disseny Responsiu

Solució:

Conclusió

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu