Skip to content

Aide-mémoire sur la mise en page CSS Grid

Cette page fournit un aide-mémoire visuel sur la mise en page CSS Grid, incluant les propriétés essentielles pour les conteneurs et les éléments de grille, ainsi que des exemples concrets de mise en page.

Conteneur de Grille (Grid Container)

Propriété Valeur Description
display grid Définit l’élément comme un conteneur de grille
grid-template-columns 100px 1fr Définit la largeur des colonnes
grid-template-rows 100px 1fr Définit la hauteur des lignes
grid-template-areas header header
sidebar main
footer footer		 Définit la grille en nommant des zones
grid-column-gap 10px Définit l’espace entre les colonnes
grid-row-gap 10px Définit l’espace entre les lignes
grid-gap 10px 20px Définit simultanément l’espace entre les lignes et les colonnes
justify-items start Aligne horizontalement les éléments de la grille à l’intérieur des cellules
align-items start Aligne verticalement les éléments de la grille à l’intérieur des cellules
justify-content start Aligne horizontalement l’ensemble de la grille à l’intérieur du conteneur
align-content start Aligne verticalement l’ensemble de la grille à l’intérieur du conteneur

Éléments de Grille (Grid Items)

Propriété Valeur Description
grid-column 1 / 3 Définit les colonnes occupées par l’élément
grid-row 1 / 3 Définit les lignes occupées par l’élément
grid-area header Place les éléments de la grille en fonction des zones nommées
justify-self start Aligne horizontalement un élément individuel à l’intérieur de sa cellule
align-self start Aligne verticalement un élément individuel à l’intérieur de sa cellule
grid-column-start 1 Définit la ligne de début de colonne
grid-column-end 3 Définit la ligne de fin de colonne
grid-row-start 1 Définit la ligne de début de ligne
grid-row-end 3 Définit la ligne de fin de ligne

Exemple de Media Query 

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Autres Exemples

Mise en page sur deux colonnes 

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

Mise en page sur trois colonnes 

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

Centrage vertical 

.container {
  display: grid;
  align-items: center;
}

Centrage horizontal 

.container {
  display: grid;
  justify-items: center;
}