Générateur de grille CSS : colonnes, lignes et zones nommées

Mode d'emploi

Saisissez les Colonnes (tailles des pistes) et les Lignes (tailles des pistes). Pour deux colonnes, 200px 1fr donne une barre latérale fixe et une zone principale souple.
Réglez l'Espace entre colonnes (px) et l'Espace entre lignes (px), et donnez au conteneur un Nom de classe.
Saisissez un nom sous Nom de zone à peindre, laissez Peindre sélectionné, et cliquez sur les cellules de cette zone. Choisissez Effacer pour vider des cellules.
Copiez le bloc CSS, ou vérifiez l'Aperçu, avant de coller les règles dans votre feuille de style.

Tailles de pistes et repeat()

Chaque piste est une taille de la grille : une longueur en px ou un pourcentage, une taille souple en fr qui partage l'espace restant au prorata de son nombre, auto, min-content ou max-content. Un minmax(minimum, maximum) donne à une piste une plage. La spécification CSS Grid Layout décrit comment chacune est dimensionnée.

repeat(3, 1fr) écrit trois fois la même piste. repeat(auto-fill, minmax(200px, 1fr)) crée autant de pistes que la largeur de la boîte peut en contenir. Comme ce nombre dépend de la boîte, chaque piste d'une répétition auto-fill ou auto-fit a besoin d'une taille fixe, et l'outil ne peut pas dessiner de zones nommées par-dessus.

grid-template-columns: 200px 1fr;  grid-template-rows: auto 1fr auto;  gap: espace-lignes espace-colonnes;

Zones nommées

La propriété grid-template-areas prend une chaîne pour chaque ligne de la grille. Les noms d'une chaîne sont les cellules de cette ligne, et un point représente une cellule qui n'appartient à aucune zone. Chaque nom doit remplir un rectangle, car le navigateur ne peut pas placer un nom en forme de L ou dans deux blocs séparés.

Les noms sont placés sur la grille par le conteneur, et chaque enfant prend sa place avec grid-area. L'outil écrit une règle pour chaque nom, afin que l'élément portant cette classe remplisse ses cellules.

Utilisez une ligne de noms pour chaque ligne de pistes, avec le même nombre de noms dans chaque ligne.
Choisissez des noms qui décrivent la partie de la page, comme header, sidebar ou main, car les règles sont écrites avec ces noms comme classes.

Exemple détaillé : une page avec en-tête, barre latérale, contenu et pied de page

La disposition par défaut a deux colonnes, 200px et une colonne souple 1fr, et trois lignes : auto pour l'en-tête, 1fr pour le milieu et auto pour le pied de page. L'espace est de 16 px dans les deux sens. L'en-tête s'étend sur les deux colonnes, la barre latérale et le contenu principal se partagent la ligne du milieu, et le pied de page s'étend sur les deux colonnes en bas.

Le CSS commence par .layout { display: grid; grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr auto; gap: 16px; } puis grid-template-areas avec trois lignes : "header header", "sidebar main" et "footer footer". Chaque nom a sa propre règle avec grid-area, pour que l'élément d'en-tête remplisse la première ligne.

Questions fréquentes

Quelle est la différence entre fr et auto ?

Une piste fr partage l'espace restant après les pistes fixes, au prorata de son nombre : 1fr 2fr donne à la seconde piste le double de la largeur de la première. Une piste auto est aussi large que son contenu le demande, puis partage l'espace disponible restant.

Pourquoi ne puis-je pas peindre des zones sur des pistes auto-fill ?

auto-fill et auto-fit déterminent le nombre de pistes d'après la largeur de la boîte : le nombre de cellules n'est donc pas connu pendant la modification. Les zones nommées demandent un nombre fixe, c'est pourquoi l'outil vous demande de supprimer auto-fill ou auto-fit lorsque des zones sont peintes.

Pourquoi chaque zone a-t-elle sa propre règle ?

grid-template-areas place les noms sur la grille, mais chaque élément doit aussi indiquer la cellule qu'il remplit, et grid-area s'en charge. L'outil écrit une règle pour chaque nom, avec une classe de même nom.

Que deviennent les cellules que je ne peins pas ?

Une cellule qui n'appartient à aucune zone est écrite avec un point dans grid-template-areas. Aucun élément nommé n'y est placé : elle reste vide, sauf si vous y placez un élément autrement.

Quels navigateurs prennent en charge la grille CSS ?

La grille CSS est prise en charge par tous les grands navigateurs actuels. Si vos visiteurs utilisent des versions plus anciennes, vérifiez la mise en page dans ces versions avant de vous fier aux zones nommées.

Ma mise en page est-elle envoyée ou enregistrée quelque part ?

Non. La grille, l'aperçu et le CSS sont produits dans votre navigateur. Rien n'est enregistré ni envoyé à notre serveur : copiez donc le CSS avant de quitter la page.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.