Docs CSS exécutables : CSS Grid

Q: Que signifie 1fr en CSS Grid ?

fr est une fraction de l'espace libre du conteneur grid. grid-template-columns: 1fr 1fr 1fr donne trois colonnes égales, et 1fr 2fr rend la deuxième colonne deux fois plus large que la première. Les tailles fixes et les espaces sont retirés d'abord ; les colonnes en fr se partagent le reste.

Q: Quelle est la différence entre auto-fill et auto-fit ?

Les deux créent autant de colonnes qu'il en tient. auto-fill garde les colonnes vides, donc quelques éléments restent étroits et laissent de l'espace vide en fin de ligne. auto-fit supprime les colonnes vides, donc les éléments s'étirent pour remplir la ligne. Avec assez d'éléments pour remplir la ligne, les deux donnent le même résultat.

Q: Comment faire qu'un élément de grille occupe deux colonnes ?

Utilisez grid-column: span 2 sur l'élément, ou donnez-lui une ligne de début et de fin : grid-column: 1 / 3 couvre les colonnes 1 et 2. grid-column: 1 / -1 occupe toute la largeur, car -1 est la dernière ligne.

Q: grid-gap est-il identique à gap ?

Oui. grid-gap, grid-row-gap et grid-column-gap sont les anciens noms. Les navigateurs les acceptent encore comme alias, mais écrivez gap, row-gap et column-gap, qui fonctionnent aussi en flexbox.

Une grille en trois lignes

Définissez display: grid sur un conteneur et listez ses colonnes avec grid-template-columns. Les enfants remplissent les cellules dans l'ordre, de gauche à droite en français, et une nouvelle ligne commence dès que les colonnes sont pleines :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Sept éléments, trois colonnes : deux lignes complètes et une troisième ligne avec l'élément 7 dans la première colonne. Toutes les colonnes ont la même largeur, et tous les éléments d'une ligne ont la même hauteur, donc les bords s'alignent dans les deux directions. C'est ce que grid apporte par rapport à flexbox.

Bac à sable grid

Tapez n'importe quelle valeur de grid-template-columns, ou cliquez sur un préréglage. L'affichage montre les largeurs de colonnes calculées par le navigateur (avec getComputedStyle) et le nombre de lignes dont les éléments ont eu besoin :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

À observer : 1fr 2fr rend la deuxième colonne exactement deux fois plus large que la première. 200px 1fr garde 200px et donne le reste à la deuxième colonne. auto 1fr auto dimensionne les colonnes extérieures selon leur contenu. repeat(4, 100px) laisse de l'espace vide à la fin, car rien n'est flexible. Une valeur invalide, comme 1fr 2, est ignorée, et la grille garde la dernière valeur valide.

L'unité fr

fr signifie « une part de l'espace libre ». Le navigateur retire d'abord les colonnes fixes (px, rem, %, contenu auto) et les espaces, puis répartit ce qui reste entre les colonnes en fr selon leurs nombres.

`grid-template-columns` dans un conteneur de 600px, sans gap	Largeurs des colonnes
`1fr 1fr 1fr`	200, 200, 200
`1fr 2fr`	200, 400
`100px 1fr 1fr`	100, 250, 250
`1fr 50%`	300, 300

fr n'est pas la même chose que % : des pourcentages plus des espaces peuvent dépasser 100 % et déborder, alors que les colonnes en fr ne se partagent toujours que ce qui reste après les espaces.

repeat(), minmax() et une grille responsive sans media query

repeat(4, 1fr) équivaut à 1fr 1fr 1fr 1fr. minmax(120px, 1fr) est une colonne qui ne descend jamais sous 120px et grandit pour prendre une part. Combinez-les avec auto-fill ou auto-fit à la place d'un nombre, et la grille crée autant de colonnes qu'il en tient :

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Cette seule déclaration donne autant de colonnes d'au moins 180px que le conteneur peut en contenir : plusieurs sur un grand écran, une seule sur un téléphone, sans media query. La différence entre auto-fill et auto-fit apparaît quand il y a moins d'éléments que de colonnes :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Le conteneur peut accueillir cinq colonnes de 100px. auto-fill les garde toutes les cinq : A, B et C font 112px chacun et deux colonnes vides restent. auto-fit supprime les colonnes vides, et les trois éléments s'étirent jusqu'à environ 187px chacun.

Placer les éléments : grid-column et grid-row

Les lignes de la grille sont numérotées à partir de 1 depuis le bord de début. grid-column: 1 / 3 signifie « de la ligne 1 à la ligne 3 », soit deux colonnes. span 2 signifie « deux colonnes à partir de l'endroit où vous tombez », et -1 est la dernière ligne :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

L'élément foncé remplit toute la première ligne. Le bleu couvre un bloc de 2 × 2, l'ambre deux lignes. Les éléments a et b remplissent seuls les cellules restantes : grid place chaque élément possible dans la cellule libre suivante. grid-auto-rows: 60px définit la hauteur des lignes que vous n'avez pas déclarées avec grid-template-rows.

grid-template-areas : nommer les parties d'une mise en page

Pour la mise en page d'une page, nommez les zones et dessinez-les sous forme de texte. Chaque chaîne est une ligne, chaque mot une cellule, et un élément rejoint une zone avec grid-area :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

L'en-tête et le pied de page couvrent les deux colonnes, car leurs noms remplissent les deux cellules de leur ligne. La ligne du milieu vaut 1fr : elle prend toute la hauteur restante des 280px. Pour tout empiler sur un téléphone, une media query n'a qu'à redessiner les zones sur une colonne : grid-template-areas: "header" "side" "main" "footer" avec grid-template-columns: 1fr. La page des media queries montre ce schéma.

Aligner dans les cellules

Par défaut, les éléments de grille s'étirent pour remplir leur cellule. Ces propriétés les déplacent à l'intérieur :

Propriété	Sur	Déplace
`justify-items`	le conteneur	chaque élément le long de la ligne (axe inline)
`align-items`	le conteneur	chaque élément de haut en bas (axe de bloc)
`place-items`	le conteneur	raccourci : `place-items: center` centre dans les deux sens
`justify-self` / `align-self`	l'élément	un seul élément
`justify-content` / `align-content`	le conteneur	l'ensemble des pistes, quand la grille est plus petite que le conteneur

display: grid; place-items: center; est la façon la plus courte de centrer un enfant dans une boîte.

Grid ou flexbox

Grid est bidimensionnel : vous décidez des colonnes (et des lignes), et le contenu les remplit, si bien que toutes les cartes d'une galerie ont la même largeur, même sur la dernière ligne. Flexbox est unidimensionnel : les éléments se dimensionnent selon leur contenu le long d'une seule ligne. Les deux se combinent bien : une grille pour la page et la galerie de cartes, flexbox dans chaque carte pour sa ligne d'en-tête. La page flexbox couvre l'autre moitié.

Ordre et accessibilité

grid-template-areas, grid-row, grid-column et order peuvent placer un élément n'importe où, mais les lecteurs d'écran et la touche Tab suivent toujours l'ordre du HTML. Gardez un ordre source qui a du sens (en-tête, navigation, contenu principal, pied de page) et utilisez grid pour l'agencer, pas pour corriger un ordre HTML incohérent.

Erreurs courantes

Mettre display: grid sur les éléments. Il va sur le parent ; seuls les enfants directs sont des éléments de grille.
Utiliser des pourcentages avec des espaces. grid-template-columns: 50% 50% plus gap: 16px déborde de 16px. Utilisez 1fr 1fr.
auto-fill alors que vous vouliez auto-fit. Avec peu d'éléments, auto-fill laisse des colonnes vides. Passez à auto-fit pour étirer les éléments.
Une colonne 1fr qui dépasse sa part. Une colonne 1fr ne rétrécit pas sous son contenu le plus long (une longue URL, une image large). Utilisez minmax(0, 1fr) pour la laisser rétrécir.
Des chaînes de zones qui ne sont pas des rectangles. Chaque zone nommée doit former un rectangle, et chaque chaîne de ligne doit avoir le même nombre de cellules, sinon toute la déclaration grid-template-areas est ignorée.
Oublier que les numéros de ligne commencent à 1. Trois colonnes ont quatre lignes : 1 / 4 ou 1 / -1 couvre les trois.

Questions fréquentes

Qu'est-ce que CSS Grid ?

Un système de mise en page qui place les éléments en lignes et en colonnes en même temps. Vous définissez display: grid sur un conteneur, décrivez ses colonnes avec grid-template-columns (et éventuellement ses lignes), et ses enfants directs remplissent les cellules dans l'ordre.

Que signifie 1fr en CSS Grid ?

fr est une fraction de l'espace libre du conteneur grid. grid-template-columns: 1fr 1fr 1fr donne trois colonnes égales, et 1fr 2fr rend la deuxième colonne deux fois plus large que la première. Les tailles fixes et les espaces sont retirés d'abord ; les colonnes en fr se partagent le reste.

Quelle est la différence entre auto-fill et auto-fit ?

Les deux créent autant de colonnes qu'il en tient. auto-fill garde les colonnes vides, donc quelques éléments restent étroits et laissent de l'espace vide en fin de ligne. auto-fit supprime les colonnes vides, donc les éléments s'étirent pour remplir la ligne. Avec assez d'éléments pour remplir la ligne, les deux donnent le même résultat.

Comment faire qu'un élément de grille occupe deux colonnes ?

Utilisez grid-column: span 2 sur l'élément, ou donnez-lui une ligne de début et de fin : grid-column: 1 / 3 couvre les colonnes 1 et 2. grid-column: 1 / -1 occupe toute la largeur, car -1 est la dernière ligne.

Quand utiliser grid plutôt que flexbox ?

Utilisez grid quand les lignes et les colonnes doivent s'aligner entre elles : galeries de cartes, formulaires aux étiquettes alignées, page avec en-tête, barre latérale et pied de page. Utilisez flexbox pour une seule ligne ou colonne dont les éléments se dimensionnent selon leur contenu, comme une barre de navigation.

grid-gap est-il identique à gap ?

Oui. grid-gap, grid-row-gap et grid-column-gap sont les anciens noms. Les navigateurs les acceptent encore comme alias, mais écrivez gap, row-gap et column-gap, qui fonctionnent aussi en flexbox.

Concepts liés