Générateur CSS Grid

Créez visuellement des mises en page CSS Grid. Définissez les lignes, colonnes et espaces, puis copiez le CSS et le HTML générés pour votre projet.

Colonnes : 3

Lignes : 3

Espacement des colonnes : 8px

Espacement des lignes : 8px

Modèle de colonnes

Aperçu

CSS

Fonctionnalités

Configuration des lignes et colonnes

Redimensionner par glissement

Fusion de cellules

Contrôle des espacements

Génère le CSS et le HTML

Comment Utiliser

1. Définissez le nombre de lignes et de colonnes.

2. Ajustez la hauteur des lignes et la largeur des colonnes (fr, px, auto).

3. Définissez l'espacement de la grille.

4. Copiez le CSS et le HTML générés.

À propos de cet outil

CSS Grid dispose le contenu en lignes et en colonnes à la fois, ce qui en fait le choix naturel pour les galeries, les tableaux de bord et les structures de page. Ce générateur configure visuellement un conteneur grid : choisissez le nombre de colonnes et de lignes, l'écart entre elles et la façon dont les colonnes se partagent l'espace — fractions égales avec 1fr, taille automatique, minmax(0, 1fr) pour éviter qu'un contenu long ne fasse exploser une colonne, ou pistes fixes de 100px. L'aperçu montre comment les éléments se répartissent dans les pistes, et le CSS est écrit avec repeat() pour un résultat compact et lisible. Copiez-le comme point de départ, puis placez chaque élément avec grid-column et grid-row dans votre propre feuille de style.

Questions Fréquentes

Que signifie l'unité fr ?

fr représente une fraction de l'espace libre du conteneur grid. Trois colonnes de 1fr se partagent l'espace à parts égales, tandis que 2fr 1fr donne à la première colonne deux fois la largeur de la seconde.

Pourquoi utiliser minmax(0, 1fr) plutôt que 1fr ?

Une piste 1fr ne peut pas descendre sous la taille minimale de son contenu : un mot long ou un tableau large peut donc élargir la colonne. minmax(0, 1fr) autorise la colonne à rétrécir, ce qui garde des colonnes égales réellement égales.

Comment rendre une grille responsive ?

Un motif courant est grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)), qui place autant de colonnes d'au moins 240px que la largeur le permet et renvoie le reste sur de nouvelles lignes, sans media queries.

Comment faire qu'un élément occupe plusieurs colonnes ?

Ajoutez grid-column: span 2 à l'élément pour qu'il couvre deux colonnes, ou grid-column: 1 / -1 pour qu'il s'étende sur toute la largeur. grid-row fonctionne de la même manière pour les lignes.

Quelle est la différence entre gap, column-gap et row-gap ?

column-gap définit l'espace entre les colonnes, row-gap l'espace entre les lignes, et gap est le raccourci des deux. Les écarts n'ajoutent de l'espace qu'entre les pistes, pas autour de la grille.