CSS Grid layout

Grid layout est le module CSS dédié à la mise en page. Il est apparu après des années de bricolage ou furent utilisées des techniques parfois approximatives souvent complexes et contre-intuitives (tables, floats, inline-blocks).

Il diffère de Flexbox principalement par le fait qu’il est dédié à des layouts bi-dimensionnels (lignes et colonnes), là où flexbox est dédié aux layouts uni-dimensionnels (lignes ou colonnes).

Ressources en ligne

Exemples

Vocabulaire

Quelques précisions de vocabulaire sur les notions essentielles nécessaires à la compréhension de Grid layout.

Lignes (line)

Les lignes (lines) verticales et horizontales qui divisent la grille et en colonnes (columns) et en lignes (rows).

Cellule (cell)

Une seule unité d’une grille CSS.

Zone (area)

Un espace rectangulaire déterminé par quatre lignes.

Piste (track)

L’espace horizontal ou vertical entre deux lignes de la grille.

Ligne (row)

Une piste horizontale d’une grille.

Colonne (column)

Une piste verticale d’une grille.

Gouttière (gutter)

L’espace entre les lignes et les colonnes dans une grille.

Conteneur (container)

Le conteneur qui contient la totalité de la grille CSS. C’est l’élément auquel on affecte la propriété display: grid ou display: inline-grid.

Élément (grid item)

Tout élément qui est l’enfant direct d’un conteneur de grille.

Démarrer

On crée un “contexte de grille” en appliquant la déclaration display: grid à un élément HTML. Cette déclaration définit un ensemble de pistes, formées de lignes et de colonnes, définissant des “cellules”.

Cet ensemble est “virtuel”, il n’existe pas dans le HTML.

Les enfants directs de ce conteneur deviennent alors des grid-items et pourront être positionnées au sein des cellules de la grille.

Positionnement des éléments

Les éléments d’une grille peuvent être excplicitement affectés à une cellule.

<body>
  <nav>nav</nav>
  <section>section</section>
  <article>article</article>
  <aside>aside</aside>
</body>
body {
    display: grid; /* crée une grille */
    grid-template-columns: 150px 500px; /* crée deux colonnes */
    grid-template-rows: 100px 200px; /* crée deux lignes */
    grid-column-gap: 20px; /* goutière verticale */
    grid-row-gap: 20px; /* goutière horizontale */
}
nav {
    /* ligne 1, colonne 1 */
    grid-row: 1; grid-column: 1;
}
section {
    /* ligne 1, colonne 2 */
    grid-row: 1; grid-column: 2;
}
article {
    /* ligne 2, colonne 1 */
    grid-row: 2; grid-column: 1;
}
aside {
    /* ligne 2, colonne 2 */
    grid-row: 2; grid-column: 2;
}
section
article

Zones

En complément de grid-template-columns et de grid-template-rows, on peut nommer les emplacements à l’aide de chaines de caractères ou de lettres, grâce à la propriété grid-template-areas.

section {
    display: grid;
    grid-template-areas: "entete entete"
                         "navigation contenu"
                         "pied pied";
}
nav {
    grid-area: navigation; /* placement de <nav> dans l'emplacement “navigation” */
}
header
footer

Flexibilité

CSS Grid introduit des unités plus complexes que les habituels px, %, em, qui permettent notamment de s'adapter à la taille des contenus et d’aporter beaucoup de flexibilité à la mise en page.

Unité Détails
fr fraction(s) de l'espace restant
min-content se rapporte à la largeur (ou hauteur) de l'élément le plus petit
max-content se rapporte à la largeur (ou hauteur) de l'élément le plus grand
minmax(min, max) exemple minmax(min-content, 20%) correspond à largeur 20% (ou hauteur), mais au minimum largeur (ou hauteur) du contenu
auto s'adapte à la largeur (ou hauteur) du contenu
fit-content identique à auto et aussi à minmax(min-content, max-content)

Ressources

Quelques liens pour débroussailler le terrain…

Tutoriaux complets

Examples