Nommer les zones, nommer les lignes.

On a utilisé jusqu’ici les numéros des lignes pour placer des éléments. CSS Grid permet aussi d’attribuer des noms aux lignes et zones de la grille.

Nommer les zones

Il est possible d’assigner des noms à des zones de la grille. Cela facilite le placement des éléments. Les noms et emplacements des zones sont définis par la propriété grid-template-areas. Exemple:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "hd  hd   hd"
    "sd  main main"
    "ft  ft   ft";
}

On peut ensuite placer un élément sur l’un des emplacements, avec “grid-area”:

.footer {
  grid-area: ft;
}

Exemple:

See the Pen Grid Layout by Manuel Schmalstieg (@eracom) on CodePen.

Plus de détails dans la documentation MDN

Nommer les lignes

Il est également possible de nommer les “Grid Lines”. Cela permet de les désigner autrement que par des numéros. On peut les nommer p.ex. “content-start”, “content-end”.

La syntaxe pour nommer les Grid Lines:

.container {
  grid-template-columns: 1fr [center-start] 1fr [center-end] 1fr;
}

Comme on le voit, on les définit en même temps que les colonnes.

On peut ensuite placer les éléments en se référant à ces noms de lignes:

.box4 {
  grid-column-start: center-start;
  grid-column-end: center-end;
}