CSS Grid Layout

CSS Grid est le système de mise en page le plus puissant disponible en CSS.

Grille de base

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Zones nommées

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

Auto-placement

Grid place automatiquement les éléments grâce à grid-auto-flow.