CSS — Grid

Flexbox dispose les éléments dans une seule direction. Mais une page complète se pense souvent en deux dimensions : des lignes et des colonnes, un en-tête qui s’étend sur toute la largeur, une barre latérale qui descend sur plusieurs rangées. C’est précisément le terrain de CSS Grid.

Flexbox ou Grid ?

Définition : CSS Grid

CSS Grid est un système de mise en page bidimensionnel : il organise les éléments simultanément en lignes et en colonnes, ce qui en fait l’outil de référence pour les structures de page complètes et les grilles régulières.

La distinction avec Flexbox est nette. Flexbox est unidimensionnel : une direction à la fois, idéal pour les composants (une barre, une rangée de cartes). Grid est bidimensionnel : lignes et colonnes ensemble, idéal pour les layouts de page. Les deux ne s’opposent pas — ils se complètent, et on les combine très souvent (une grille de page en Grid, dont chaque cellule organise son contenu en Flexbox).

Activer CSS Grid

.container {
    display: grid;
}

Effet immédiat : les enfants deviennent des grid items. Mais tant qu’on n’a pas défini de colonnes, ils s’empilent simplement sur une seule colonne. La vraie puissance de Grid vient de la définition explicite de la grille.

Définir les colonnes

grid-template-columns décrit les colonnes : chaque valeur fournie crée une colonne de la taille indiquée.

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;
}

Cet exemple produit trois colonnes de 200px. La syntaxe est directe — une valeur, une colonne :

/* 2 colonnes inégales */
grid-template-columns: 300px 500px;

/* 4 colonnes égales */
grid-template-columns: 200px 200px 200px 200px;

L’unité fr

L’unité fr (fraction) représente une part de l”espace disponible. C’est elle qui rend les grilles souples.

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

On obtient trois colonnes égales qui se partagent toute la largeur et s’ajustent automatiquement quand le container change de taille — là où des valeurs en pixels resteraient figées.

On peut mélanger fr et pixels, ce qui est très courant pour une barre latérale fixe accompagnée d’un contenu flexible :

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

La première colonne fait 250px, la seconde absorbe tout le reste.

La fonction repeat()

Quand des colonnes se répètent, repeat() évite la redite.

/* Au lieu de */
grid-template-columns: 1fr 1fr 1fr 1fr;

/* On écrit */
grid-template-columns: repeat(4, 1fr);

La syntaxe est repeat(nombre, taille). Plus on a de colonnes, plus le gain de lisibilité est appréciable.

Définir les lignes

Symétriquement, grid-template-rows décrit les lignes.

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

En pratique, on définit rarement les lignes explicitement : on laisse Grid les créer automatiquement au fil du contenu, et on ne fixe leur hauteur que lorsqu’on en a vraiment besoin.

Espacement avec gap

Comme pour Flexbox, gap gère l’espace entre les cellules — proprement, sans marges.

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

On peut dissocier l’espacement vertical et horizontal :

/* vertical horizontal */
gap: 30px 20px;

/* ou séparément */
row-gap: 30px;
column-gap: 20px;

Grille responsive avec auto-fit et minmax()

Voici l’une des combinaisons les plus élégantes du CSS moderne : une grille qui crée d’elle-même le bon nombre de colonnes selon la largeur, sans la moindre media query.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

Décortiquons-la. minmax(min, max) définit une taille entre deux bornes : ici, chaque colonne fait au minimum 250px et au maximum 1fr (elle s’étire si la place le permet).

grid-template-columns: repeat(3, minmax(200px, 1fr));

Et auto-fit remplace le nombre fixe de repeat() par « autant que possible ». Le navigateur place donc autant de colonnes d’au moins 250px qu’il peut loger, et les réorganise tout seul quand la fenêtre rétrécit. C’est la solution idéale pour une galerie d’images ou une grille de cartes.

Positionner un item sur plusieurs colonnes

Un item peut s’étendre sur plusieurs colonnes avec span :

.item {
    grid-column: span 2; /* Occupe 2 colonnes */
}

Typiquement, un en-tête ou un pied de page occupe toute la largeur de la grille :

.header {
    grid-column: span 3; /* Occupe les 3 colonnes */
}

Positionner un item précisément

On peut aussi placer un item entre des lignes de grille numérotées. Car Grid numérote ses lignes de séparation, de gauche à droite et de haut en bas :

    1      2      3      4
1   |  A   |  B   |  C   |
2   |  D   |  E   |  F   |
3   |  G   |  H   |  I   |

.item {
    grid-column: 1 / 3; /* De la ligne verticale 1 à la 3 */
    grid-row: 1 / 2;    /* De la ligne horizontale 1 à la 2 */
}

La notation 1 / 3 se lit « depuis la ligne 1 jusqu’à la ligne 3 », ce qui couvre les deux colonnes situées entre elles.

Exemple de grille complète

Mises ensemble, ces propriétés permettent de composer une mise en page de page entière en quelques lignes :

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

.header {
    grid-column: span 3; /* Toute la largeur */
}

.sidebar {
    grid-column: 1;
    grid-row: 2 / 4; /* S'étend sur 2 lignes en hauteur */
}

.footer {
    grid-column: span 3;
}

Grid ou Flexbox : que choisir ?

Pour clore, une règle de décision simple. On choisit Grid pour les layouts de page complets, les grilles régulières (galeries, catalogues) et tout positionnement en deux dimensions. On choisit Flexbox pour les composants (barres, cartes), l’alignement en une dimension et la distribution souple de l’espace. Et le plus souvent, on combine les deux : Grid pour la grande structure, Flexbox à l’intérieur des cellules.