grid-area

Placer par les 4 coins

C'est un raccourci pour grid-rowet grid-column

La propriété grid-area permet de définir en une seule déclaration :

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

Exemple :

.no1 {
  grid-row-start: 1;
  grid-column-start: 2;
  grid-row-end: 3;
  grid-column-end: 4;
}

Est équivalent à :

.no1 {
  grid-area: 1 / 2 / 3 / 4;
}

See the Pen Grid - grid-template-area by TIM Montmorency (@tim-momo) on CodePen.

Placer un élément dans une zone définie par grid-template-areas

Fonctionne de pair avec grid-template-areas

grid-template-areas permet de dessiner la grille en nommant des zones .

Ensuite, grid-area appliqué sur les éléments enfants, permet d'attribuer celui-ci à une zone spécifique définie dans grid-template-areas.

.grid {
  display: grid;
  grid-template-areas: 
    "menu content content content"
    "menu content content content "
    "footer footer  footer footer";
}

.no1 { grid-area: menu; }
.no2 { grid-area: content; }
.no3 { grid-area: footer; }

👉 Ici :

• La zone "menu" occupe la première colonne sur toute la hauteur, comme un barre latérale.
• La zone "content" remplit l’espace central (3 colonnes sur 2 rangées).
• La zone "footer" s’étend sur toute la largeur en bas.

See the Pen Grid - grid-template-area by TIM Montmorency (@tim-momo) on CodePen.

  En savoir plus sur grid-area