Grid

Definition

Système de layout bidimensionnel qui organise le contenu en lignes et colonnes simultanément. Plus puissant que Flexbox pour les layouts de page complexes avec zones nommées.

Analogie

Comme un tableau Excel : on définit lignes et colonnes, puis on place le contenu dans les cellules.

Exemple de code

.layout {
  display: grid;
  grid-template: "header header" auto
                 "sidebar main" 1fr
                 "footer footer" auto / 250px 1fr;
}
.header { grid-area: header; }

Cas d'usage

Créer des layouts de page complets, dashboards ou galeries avec placement précis en deux dimensions.

Anti-pattern

Termes lies