Readdy logo

Générateur de grille CSS

Concevez visuellement votre disposition de grille CSS : ajustez les colonnes, les lignes et les espaces, cliquez sur les cellules pour créer des zones et copiez le code généré.

Aperçu de la grille

1.1
1.2
1.3
2.1
2.2
2.3
3.1
3.2
3.3

CSS généré

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

Comment utiliser le générateur de grille CSS

CSS Grid est le système de mise en page le plus puissant en CSS. Notre générateur visuel vous permet de concevoir des dispositions de grille complexes en ajustant les paramètres et en cliquant sur les cellules pour définir des zones, puis en copiant le code généré directement dans votre projet.

1

Définir les colonnes et les lignes

Choisissez le nombre de colonnes et de lignes dont votre grille a besoin. Utilisez les entrées numériques pour ajuster la structure de la grille.

2

Configurer les tailles et les espaces

Définissez les largeurs de colonnes et les hauteurs de lignes à l'aide de n'importe quelle unité CSS (fr, px, %, auto, etc.). Définissez l'écart entre les cellules.

3

Cliquez pour sélectionner les zones

Cliquez sur des cellules individuelles pour les marquer comme zones de grille nommées. Chaque cellule sélectionnée devient une zone distincte dans le CSS généré.

4

Copiez le code

Cliquez sur "Copier le code" pour récupérer le CSS généré. Collez-le dans votre feuille de style et commencez immédiatement à créer votre mise en page.

Pourquoi utiliser notre générateur de grille CSS

Arrêtez d'écrire la grille CSS à la main. Concevez visuellement, visualisez votre mise en page en temps réel et copiez le code prêt pour la production en un clic.

  • Conception visuelle pointer-cliquer

    Visualisez la disposition de votre grille au fur et à mesure que vous la construisez. Cliquez sur les cellules pour définir des zones nommées – pas besoin de visualiser les zones de modèle de grille dans votre tête.

  • Prise en charge d'unités flexibles

    Utilisez n'importe quelle unité CSS valide : fr, px, %, em, rem, auto, minmax(), repeat(), etc. Mélangez les unités pour des mises en page réactives.

  • Génération de code instantanée

    Obtenez du CSS prêt pour la production dès que vous avez terminé la conception. Pas de codage manuel, pas d'erreurs de syntaxe : copiez et collez directement.

  • Dénomination des zones de grille

    Sélectionnez des cellules pour créer des zones de grille nommées. Le générateur écrit des zones de modèle de grille pour vous, rendant votre CSS lisible et maintenable.

Foire aux questions

CSS Grid est un système de mise en page bidimensionnel en CSS qui vous permet d'organiser simultanément les éléments en lignes et en colonnes. Il s'agit de l'outil de mise en page CSS le plus puissant disponible, idéal pour les structures de pages complexes.
grid-template-areas vous permet de nommer des régions de votre grille et d'attribuer des éléments à ces noms. Cela rend le code de mise en page lisible : au lieu de compter les numéros de ligne/colonne, vous référencez directement des zones telles que « en-tête », « barre latérale » ou « principale ».
Vous pouvez utiliser n'importe quelle unité CSS valide : fr (unités fractionnaires), px, %, em, rem, auto, minmax(), repeat(), etc. L'unité fr est la plus courante pour les grilles car elle distribue l'espace disponible proportionnellement.
Oui, notre générateur de grille CSS est entièrement gratuit. Aucune inscription requise, aucune limite d'utilisation : concevez autant de dispositions de grille que nécessaire.

Créez des dispositions de grille parfaites en quelques secondes