Bac à sable Grid CSS

CSS Grid transforme un élément en mise en page à deux dimensions. Vous appliquez display: grid au conteneur, définissez les pistes de colonnes et de lignes avec grid-template-columns et grid-template-rows, et le navigateur place chaque enfant dans les cellules résultantes. Par exemple, grid-template-columns: repeat(3, 1fr) crée trois colonnes égales, et les enfants s'y enchaînent de gauche à droite, de haut en bas. Contrairement aux anciennes mises en page float ou flexbox, Grid gère simultanément lignes et colonnes, ce qui vous permet de contrôler les deux axes depuis une seule propriété de conteneur.

Ajoutez display: grid à un conteneur, puis décrivez ses pistes. Le minimum est une ligne : display: grid; grid-template-columns: 1fr 1fr; — ce qui donne deux colonnes égales. Ensuite, ajoutez grid-template-rows pour des lignes explicites, gap pour l'espacement, et des règles par élément comme grid-column: span 2 pour qu'un enfant s'étende sur plusieurs cellules. La propriété abrégée grid peut combiner lignes, colonnes et zones en une seule déclaration, mais la plupart des développeurs définissent grid-template-columns, gap et l'alignement séparément car c'est plus lisible. Ce générateur rédige ces règles pour vous.

Ils définissent la taille de chaque piste de colonne et de ligne. grid-template-columns: 200px 1fr 1fr crée une première colonne fixe à 200px et deux colonnes flexibles qui se partagent l'espace restant. grid-template-rows: auto 1fr définit une première ligne dimensionnée selon le contenu et une seconde qui remplit la hauteur disponible. Chaque valeur de la liste correspond à une piste, et le nombre de valeurs détermine le nombre de colonnes ou de lignes explicites de la grille. Ce générateur construit les deux listes au fur et à mesure que vous ajoutez et modifiez des pistes, en mettant à jour l'aperçu en temps réel.

fr est l'unité « fraction » — elle répartit l'espace disponible, ainsi repeat(3, 1fr) crée trois colonnes de largeur égale. repeat(n, valeur) est une abréviation qui répète un schéma de piste n fois, donc repeat(4, 1fr) équivaut à 1fr 1fr 1fr 1fr. minmax(min, max) définit une piste qui ne se réduit jamais en dessous du min ni ne dépasse le max ; minmax(150px, 1fr) maintient une colonne d'au moins 150px tout en lui permettant de s'élargir. Combinez-les — repeat(auto-fit, minmax(150px, 1fr)) — pour une grille qui ajoute et supprime des colonnes d'elle-même selon la largeur du conteneur.

Utilisez repeat() avec auto-fit (ou auto-fill) et minmax() pour que la grille se réorganise automatiquement : grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Chaque colonne garde une largeur minimale de 200px et le navigateur en place autant que le conteneur le permet, réduisant à moins de colonnes sur les écrans étroits et en ajoutant sur les larges. Passez ce générateur en mode Responsive, définissez la largeur minimale des cellules, et copiez le résultat. C'est la façon la plus simple de construire une grille de cartes fluide qui s'adapte du mobile au bureau sans rédiger une seule media query.

grid-template-areas vous permet de nommer des régions et de dessiner la mise en page comme de l'art ASCII. Vous donnez un nom à chaque enfant avec grid-area, puis vous cartographiez la grille comme grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Répéter un nom sur plusieurs cellules fait s'étendre cette zone sur celles-ci, et un point (.) laisse une cellule vide. C'est la façon la plus lisible de construire des structures de page classiques — en-tête, barre latérale, contenu principal, pied de page — car le template ressemble à la mise en page. L'onglet Zones ici rédige le template et les règles grid-area correspondantes pour chaque région que vous nommez.

Pour une grille 2x2, définissez deux colonnes et deux lignes : grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; et placez quatre éléments. Pour une grille à 3 colonnes, utilisez grid-template-columns: repeat(3, 1fr) et laissez les éléments se répartir sur autant de lignes que nécessaire. Dans cet outil, il suffit de définir le nombre de colonnes et de lignes, et l'aperçu se met à jour immédiatement — sans rien à saisir. Le générateur gère automatiquement l'abréviation repeat() lorsque les pistes voisines ont la même taille.

La grille à 12 colonnes est une convention de design popularisée par Bootstrap et Foundation qui divise la page en douze colonnes égales. Douze est pratique car ce nombre se divise en moitiés, tiers, quarts et sixièmes. Un composant peut s'étendre sur n'importe quel nombre entier de colonnes : 6 pour une moitié, 4 pour un tiers, 3 pour un quart. Avec CSS Grid, vous la recréez en une ligne : grid-template-columns: repeat(12, 1fr), et vous utilisez grid-column: span 4 sur les enfants pour les dimensionner. Réglez les colonnes à 12 ici pour obtenir la grille classique des frameworks en CSS pur, sans dépendance à Bootstrap.

Grid est bidimensionnel — il contrôle simultanément lignes et colonnes — tandis que Flexbox est unidimensionnel, alignant les éléments sur une seule ligne ou colonne. Préférez Grid lorsque vous construisez une mise en page globale de page ou de cartes avec des lignes et colonnes alignées (tableaux de bord, galeries, structures de page). Préférez Flexbox pour un seul ensemble de contenu comme une barre de navigation, une barre d'outils ou une rangée de boutons. Ils fonctionnent très bien ensemble : une grille pour la structure extérieure de la page, Flexbox à l'intérieur de cellules individuelles.

Tailwind propose des utilitaires de grille : ajoutez grid puis grid-cols-3 pour trois colonnes égales, gap-4 pour l'espacement, et col-span-2 / row-span-2 sur les enfants pour les faire s'étendre. grid-cols-3 compile en repeat(3, minmax(0, 1fr)). Pour quelque chose de personnalisé — comme une piste auto-fit responsive — utilisez une valeur arbitraire : grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Basculez la sortie sur l'onglet Tailwind et ce générateur rédige les classes utilitaires exactes pour votre conteneur et chaque élément, prêtes à coller dans votre JSX ou votre balisage HTML.

Utilisez grid-column et grid-row sur l'enfant. grid-column: span 2 rend un élément large de deux colonnes ; grid-column: 1 / 3 le place de la ligne 1 à la ligne 3 (également deux colonnes). La même logique s'applique verticalement avec grid-row: span 2. En Tailwind, ce sont col-span-2 et row-span-2. Dans ce playground, vous pouvez faire glisser sur les cellules de l'aperçu pour créer un élément étendu, ou saisir les valeurs exactes de début et d'étendue dans le panneau d'élément. Le CSS et la sortie Tailwind se mettent tous deux à jour au fur et à mesure.

La propriété gap ajoute de l'espace entre les pistes : gap: 16px place 16px entre chaque ligne et chaque colonne. Vous pouvez définir les axes séparément avec gap: 24px 16px (row-gap puis column-gap), ou utiliser directement row-gap et column-gap. Gap n'affecte que l'espace entre les cellules — il n'ajoute jamais de rembourrage autour du bord extérieur de la grille, ce qui est une source de confusion fréquente. Utilisez les contrôles row-gap et column-gap ici — liez-les pour un espacement uniforme ou dissociez-les pour affiner chaque axe indépendamment.

Entièrement gratuit, sans inscription et sans rien à installer. Layoutit Grid est un bon point de départ, mais il ne produit pas de sortie Tailwind et nécessite de naviguer dans un onglet séparé pour copier les règles grid-area. Le CSS Grid Generator de Sarah Drasner est un outil pédagogique minimaliste sans contrôles au niveau des éléments ni liens partageables. UtiloKit ajoute la sortie Tailwind CSS, des zones de template nommées, un mode auto-fit responsive, des liens partageables et un éditeur d'éléments interactif par glisser-déposer — le tout au même endroit. Tout est généré localement dans votre navigateur, donc vos mises en page ne sont jamais envoyées sur un serveur.

Oui. L'outil est entièrement responsive et fonctionne dans tout navigateur mobile moderne, notamment Safari sur iPhone et Chrome sur Android. Créez des mises en page Grid en déplacement, copiez la sortie CSS ou Tailwind, et collez-la dans votre projet. Comme tout s'exécute côté client, il n'y a aucun envoi de données, aucun compte et aucune attente. Il fonctionne même hors ligne une fois la page chargée. L'éditeur d'éléments par glisser-déposer est adapté au tactile, ce qui vous permet de construire des mises en page Grid complexes sans souris.