Softonic

Générateur de CSS Grid

Étape 1 / 3
Suivant

CSS Grid est la méthode standard pour créer des mises en page 2D, mais la syntaxe du conteneur s’oublie facilement. Ce générateur écrit les règles du conteneur à votre place : un nombre fixe de colonnes de largeur égale, l’espacement entre les pistes et une media query qui passe en colonnes auto-fit sous une largeur minimale, pour que la mise en page reste lisible sur petit écran. Le résultat est du CSS de conteneur pur ; le placement des éléments reste dans votre propre feuille de style.

Comment créer une grille

  1. 1

    Définissez le nombre de colonnes

    Entre 1 et 12 pistes de largeur égale.

  2. 2

    Définissez la largeur minimale des colonnes

    Sous cette largeur, la grille passe en auto-fit pour que chaque colonne garde une taille minimale utilisable.

  3. 3

    Définissez l'espacement

    L'espace entre les colonnes et les lignes.

  4. 4

    Générez le CSS

    L'outil écrit les règles du conteneur plus le fallback responsive.

  5. 5

    Copiez le code

    Collez les règles du conteneur dans votre feuille de style et placez les éléments avec vos propres règles `grid-column` / `grid-row`.

Le conteneur généré

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
  • repeat(3, minmax(0, 1fr)) : trois colonnes qui se partagent la largeur disponible à parts égales. 1fr est une fraction de l’espace restant ; minmax(0, 1fr) laisse les colonnes rétrécir sous la taille de leur contenu.
  • gap : l’espace entre chaque piste.
  • La media query passe à repeat(auto-fit, minmax(220px, 1fr)), soit autant de colonnes que possible, chacune d’au moins 220px. Le point de rupture est le nombre de colonnes multiplié par la largeur minimale (avec un plancher de 120px), donc sur petit écran la grille réorganise les lignes au lieu de se comprimer.

L’unité fr

fr signifie “une fraction de l’espace restant” : après soustraction des pistes de taille fixe, l’espace restant est divisé par le nombre total d’unités fr.

grid-template-columns: 200px 1fr 2fr;

Sur un conteneur de 1000px, la première colonne prend 200px et les 800px restants se partagent selon un rapport 1:2, soit 267px et 533px.

auto-fill vs. auto-fit

  • auto-fill : crée des pistes vides de remplissage quand il n’y a pas assez d’éléments.
  • auto-fit : réduit les pistes vides à zéro, si bien que les éléments restants s’étirent pour remplir la ligne.

Le fallback responsive utilise auto-fit, ce qui convient aux grilles de cartes : la ligne paraît toujours pleine.

Largeurs de colonnes différentes

Le générateur produit des colonnes égales. Modifiez le résultat pour mélanger les tailles : grid-template-columns: 200px 1fr 2fr; donne une barre latérale fixe et deux colonnes flexibles dans un rapport 1:2. Pour les zones nommées (grid-template-areas) ou le placement explicite (grid-column: 1 / 3), ajoutez ces règles à la main par-dessus le conteneur généré.

Grid vs. Flexbox

  • Grid : mise en page 2D explicite avec des pistes. Idéal quand la mise en page a une structure de lignes et de colonnes (squelette de page, galerie, tableau de bord).
  • Flexbox : alignement 1D le long d’un seul axe. Idéal quand les éléments s’écoulent naturellement (barre de navigation, rangée de boutons).

Les mises en page réelles combinent souvent les deux : Grid pour le squelette de la page, Flexbox à l’intérieur des composants.

Pièges courants

  • Oublier min-width: 0 sur les enfants : les éléments de grille utilisent par défaut la largeur minimale de leur contenu, ce qui empêche les colonnes fr de rétrécir sous le mot le plus long. Mettez min-width: 0 sur les enfants pour qu’ils puissent rétrécir.
  • Imbriquer sans display: grid : un enfant de grille n’est pas lui-même une grille tant que vous ne le déclarez pas.

Questions fréquentes

Elle protège la mise en page sur petit écran. La media query générée passe à repeat(auto-fit, minmax(largeur, 1fr)), donc chaque colonne garde au moins cette largeur et la grille ajoute des lignes au lieu de comprimer les colonnes.

Le générateur produit des colonnes égales. Modifiez la ligne grid-template-columns du résultat pour mélanger les tailles, par exemple 1fr 2fr 1fr pour une colonne centrale large, ou 200px 1fr pour une barre latérale fixe.

Souvent parce que l’élément a le min-width: auto par défaut, qui correspond à la largeur minimale de son contenu. Mettez min-width: 0 sur l’élément de grille pour qu’il puisse rétrécir dans sa cellule.

Grid quand la mise en page a une structure de lignes et de colonnes (une page, une galerie de photos, un tableau de bord). Flexbox quand les éléments s’écoulent le long d’un seul axe (une barre de navigation, une rangée de boutons, une pile de champs de formulaire).

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.