📐 CSS Grid Cheatsheet¶

Le CSS Grid permet de créer des mises en page en deux dimensions (lignes et colonnes).
C’est une méthode puissante pour organiser et positionner les éléments d’une page.

🔹 Créer un Grid¶

Sur le bloc parent, activer l'affichage en grid.

.container {
  display: grid; /* active grid */
}

🔹 Définir colonnes et lignes¶

Il existe 2 méthodes pour créer les lignes et les colonnes de la grille :

grid-template : créer un modèle avec nombre de colonnes et de lignes avec des tailles associées
grid-areas: créer une maquette avec des noms de zones

*️⃣ Méthode 1 : modèle grid-template¶

Le code suivant crée une grille de 3 colonnes par 2 lignes.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 3fr;   /* 3 colonnes de largeur en fraction d'espace*/
  grid-template-rows: 6rem auto;        /* 2 lignes dont la hauteur de la première est de 6rem et la deuxième dépend du contenu*/
}

Positionner les items¶

Chaque élément enfant peut être placé avec les propriétés suivantes :

#item1 {
  grid-column: 1 / span 3; /* démarre à la colonne 1 et s'étend sur 3 colonnes */
  grid-row: 1 / span 2;    /* démarre à la ligne 1 et s'étend sur 2 lignes */
}

#item2 {
  grid-column: 2 / 4; /* débute à la colonne 2 et s'arrête avant la 4 */
  grid-row: 2 / 3;    /* débute à la ligne 2 et s'arrête avant la 3 */
}

#item3 {
  grid-column-start: 1; /*débute à la colonne 1*/
  grid-column-end: 3; /*arrête avant la colonne 3*/
  grid-row-start: 1;  /*débute à la ligne 1*/
  grid-row-end: 3;  /*arrête avant la ligne 3*/
}

*️⃣ Méthode 2 : zones grid-areas¶

Définir un "nom" pour chaque zone de la grille :

.container {
  grid-template-areas:
    "tete tete"
    "sidebar corps"
    "pied pied";
}

Positionner les items¶

Positionner les enfants avec leur nom de zone respective :

header  { grid-area: tete; }
.sidebar { grid-area: sidebar; }
main    { grid-area: corps; }
footer  { grid-area: pied; }

*️⃣ Mélange des deux¶

On peut mélanger les deux méthodes pour établir des zones, avec des tailles définies.

<div class="container">
  <header>Header</header>
  <div class="sidebar">Barre gauche</div>
  <main>Contenu</main>
  <footer>Footer</footer>
</div>

.container {
  display: grid;
  grid-template-columns: 1fr 4fr; /*2 colonnes dont la deuxième est 4 fois large comme la première*/
  grid-template-rows: 10rem auto 10rem; /*3 lignes dont la deuxième s'ajuste au contenu*/
  grid-template-areas: /*4 zones dans la grille : 1re ligne-> une zone, 2e ligne-> 2 zones, 3e ligne -> 1 zone*/
    "tete tete"
    "sidebar corps"
    "pied pied";
  gap: 1rem;
}

header  { grid-area: tete; }
.sidebar { grid-area: sidebar; }
main    { grid-area: corps; }
footer  { grid-area: pied; }

🔹 Espacement (gaps)¶

Pour créer des espaces (marges entre les colonnes et les lignes)

.container {
  gap: 1.5rem;           /* espace entre lignes et colonnes */
  column-gap: 0.75rem;    /* espace entre les colonnes */
  row-gap: 1rem;       /* espace entre les lignes */
  gap: 0;           /*retirer les espaces*/
}

🔹 Alignement dans la grille¶

.container {
  justify-items: center;  /* horizontal: start | end | center | stretch */
  align-items: center;    /* vertical: start | end | center | stretch */
}

#item1{
  justify-self: stretch;  /* horizontal: start | end | center | stretch */
  align-self: stretch;  /* vertical: start | end | center | stretch */
}

🚀 Résumé¶

display: grid;
grid-template-columns / grid-template-rows pour définir des taille des colonnes et de lignes
grid-column / grid-row pour positionner un enfant
grid-template-areas pour organiser les zones avec des noms
gap pour les espaces
justify-items, align-items pour aligner tous les enfants dans leur cellule
justify-self, align-self pour aligner un enfant dans sa cellule

Grid