Générateur de CSS Grid

Le CSS Grid Generator est un outil en ligne gratuit pour concevoir visuellement des mises en page CSS grid avec des zones nommées, des préréglages et une sortie de code en direct pour CSS, Tailwind et HTML. Il fonctionne entièrement dans votre navigateur, sans installation ni inscription.

Cliquez et faites glisser sur les cellules dans l'aperçu visuel. Nommez d'abord la zone (ou laissez vide pour un nom automatique). La sortie CSS inclut grid-template-areas et des sélecteurs de classe.

Chaque colonne ou ligne peut utiliser fr, px, %, auto ou minmax(min, max). minmax affiche des champs numériques min/max pour des pistes responsives.

Au mieux. Les pistes fr uniformes correspondent à grid-cols-N ; les unités mixtes se rabattent sur des valeurs arbitraires comme grid-cols-[200px_1fr_200px]. La sortie CSS est la source de référence.

Oui, le CSS Grid Generator est 100% gratuit, sans inscription, sans frais cachés et sans limite d'utilisation. Tout le traitement s'effectue localement dans votre navigateur, garantissant une confidentialité totale.

Absolument. Le CSS Grid Generator traite tout côté client, dans votre navigateur. Aucune donnée n'est envoyée ni stockée sur un serveur. Votre contenu reste privé sur votre appareil à tout moment.

Oui, le CSS Grid Generator est entièrement responsive et fonctionne sur smartphones et tablettes. Vous pouvez l'utiliser sur n'importe quel appareil doté d'un navigateur web moderne, sans aucun téléchargement d'application.

Aucun compte ni inscription n'est nécessaire. Ouvrez simplement le CSS Grid Generator dans votre navigateur et commencez à l'utiliser immédiatement. Il n'y a ni barrière d'inscription ni restriction d'utilisation.

Le CSS Grid Generator prend en charge un large éventail de formats et de langages populaires. Consultez l'interface de l'outil pour la liste complète des options prises en charge.

Le CSS Grid Generator fonctionne sur tous les navigateurs modernes, dont Chrome, Firefox, Safari, Edge et Opera. Pour une expérience optimale, utilisez la dernière version de votre navigateur préféré.

Ces trois unités déterminent la façon dont chaque piste est dimensionnée. L'unité fr représente une fraction de l'espace restant une fois les pistes fixes placées : ainsi, deux colonnes réglées à 1fr chacune se partagent la largeur restante à parts égales et restent flexibles quand le conteneur change de taille. Une valeur en px est une largeur fixe en pixels qui ne change jamais, idéale pour des barres latérales, des rails ou des en-têtes qui doivent garder leur taille. Un % se mesure par rapport à la largeur ou à la hauteur du conteneur lui-même, donc une colonne à 25% occupe toujours un quart, quel que soit le contenu. Un motif courant les combine, comme une barre latérale fixe de 250px à côté d'une colonne principale flexible en 1fr. Dans ce générateur, chaque colonne et chaque ligne dispose de son propre menu déroulant d'unité, ce qui permet de mélanger fr, px, % et auto et de voir l'aperçu en direct ainsi que le CSS se mettre à jour instantanément au fil de vos essais.

Utilisez minmax() dès qu'une piste doit évoluer entre deux bornes plutôt que rester à une taille fixe. Elle prend un minimum et un maximum, si bien que minmax(100px, 1fr) permet à une colonne de rétrécir jusqu'à 100px minimum mais de s'étendre pour occuper l'espace restant quand la place le permet. C'est la base des mises en page responsives : une barre latérale peut conserver un minimum lisible sur les petits écrans tout en s'agrandissant sur les grands, sans media query. Une valeur fixe en px n'est préférable que lorsqu'une piste ne doit jamais bouger, comme un rail d'icônes précis. Dans cet outil, choisir minmax dans le menu déroulant d'unité d'une piste fait apparaître des champs numériques min et max dédiés, afin que vous fixiez les deux bornes visuellement et que le CSS généré écrive la bonne valeur minmax(min, max). Essayez-le sur une colonne pour voir l'aperçu s'étirer et se plafonner pendant que vous faites varier la largeur du navigateur.

Les deux positionnent des enfants dans une grille, mais se lisent très différemment. Le placement basé sur les lignes utilise des numéros de ligne de grille, si bien qu'un enfant s'étend avec grid-column: 1 / 3 et grid-row: 2 / 4 — précis, mais qui oblige à compter les lignes et à recompter chaque fois que les pistes changent. grid-template-areas donne au contraire des noms humains aux rectangles, comme header, sidebar et main, puis place un enfant avec un simple grid-area: header. La structure devient lisible d'un coup d'œil et bien plus facile à réorganiser, puisque vous modifiez la carte nommée plutôt que de jongler avec des numéros de ligne. Les zones nommées gardent aussi le balisage auto-documenté pour vos coéquipiers. Ce générateur mise sur les zones : saisissez un nom, glissez sur les cellules pour peindre la région, et il génère le bloc grid-template-areas ainsi qu'un sélecteur de classe pour chaque zone, tout en vous laissant affiner numériquement les valeurs de début et de fin de ligne et de colonne quand cette précision est nécessaire.

Elles se ressemblent mais agissent sur des choses différentes. justify-items aligne le contenu à l'intérieur de chaque cellule de grille le long de l'axe de ligne (inline) : le régler sur center centre chaque élément dans sa propre cellule, tandis que les cellules elles-mêmes restent en place. justify-content aligne l'ensemble des pistes dans le conteneur de grille lorsque les colonnes ne remplissent pas toute la largeur disponible, c'est là qu'interviennent les valeurs de distribution comme space-between, space-around et space-evenly pour espacer les colonnes. La même paire existe sur l'axe de bloc avec align-items et align-content. En résumé, les propriétés -items déplacent les éléments à l'intérieur des cellules, et les propriétés -content déplacent les pistes à l'intérieur du conteneur. Ce générateur expose les quatre propriétés sous forme de menus déroulants, ainsi que des curseurs de gap indépendants pour les lignes et les colonnes, afin que vous puissiez basculer chaque option et voir immédiatement comment la mise en page se déplace avant de copier le CSS obtenu.

La règle rapide porte sur les dimensions : Flexbox est unidimensionnel, il aligne les éléments le long d'une seule ligne ou colonne, tandis que CSS Grid est bidimensionnel, contrôlant lignes et colonnes en même temps. Optez pour Flexbox quand vous avez une rangée d'éléments qui doit s'enrouler ou se répartir sur un seul axe, comme une barre de navigation, un groupe de boutons ou des tags. Optez pour Grid quand vous avez besoin d'une véritable structure de page ou de composant où les éléments doivent s'aligner sur les deux axes, comme un tableau de bord avec en-tête, barre latérale, zone principale et pied de page. Ce ne sont pas des rivaux et ils s'imbriquent souvent : une grille définit le squelette global de la page, et Flexbox organise le contenu à l'intérieur d'une cellule donnée. Comme la syntaxe de Grid est dense et facile à mal utiliser subtilement, ce générateur vous permet de construire la structure bidimensionnelle visuellement, de peindre des zones nommées, et de copier un CSS, Tailwind ou HTML propre directement dans votre projet.