Phase 3 — Mise en page
#11 CSS Grid
grid-template, areas, fr, auto-fit
Qu'est-ce que CSS Grid ?
CSS Grid est un système de mise en page bidimensionnel. Contrairement à Flexbox (un axe), Grid permet de contrôler lignes et colonnes simultanément.
Conteneur Grid
Grille de base
.grille {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
grid-template-rows: auto;
gap: 20px; /* Espace lignes et colonnes */
}L'unité fr et le dimensionnement
Dimensionnement des colonnes
/* Fixe + flexible */
grid-template-columns: 250px 1fr; /* Sidebar + main */
/* Min/max */
grid-template-columns: minmax(200px, 1fr) 2fr;
/* Responsive auto-fit */
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* ↑ Crée autant de colonnes que possible, minimum 280px */Zones de grille
Zones nommées
.layout {
display: grid;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
grid-template-columns: 250px 1fr 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }Placement des éléments
Placement
.element {
grid-column: 1 / 3; /* S'étend des colonnes 1 à 3 */
grid-row: 2 / 4; /* S'étend des lignes 2 à 4 */
}
.pleine-largeur {
grid-column: 1 / -1; /* Toutes les colonnes */
}À vous de jouer
Essayez les commandes CSS Grid ci-dessous :
terminal — browser