Générateur CSS Grid

Concevez une grille CSS visuellement — définissez colonnes, lignes, espacements et cellules fusionnées, puis copiez le CSS grid-template. Tout s'exécute dans votre navigateur.

Le générateur CSS Grid s'exécute entièrement dans votre navigateur. Les colonnes, lignes, tailles de piste, espacements et cellules fusionnées que vous configurez ne quittent jamais votre appareil et rien n'est téléversé vers ArrayKit.

Ouvrir le formateur CSS

À propos de Générateur CSS Grid

Le générateur CSS Grid vous permet de construire une mise en page en grille à l'œil et de copier le CSS exact qu'il produit. Choisissez un nombre de colonnes et de lignes, dimensionnez chaque piste avec des unités fr, des pixels, des pourcentages, auto ou minmax(), et définissez l'espacement. Un aperçu en direct montre la grille ; cliquez sur deux cellules pour les fusionner en une région étendue et l'outil écrit pour vous les règles grid-column et grid-row correspondantes. Les séries de trois pistes identiques ou plus se condensent en repeat() pour que la sortie reste nette, et vous pouvez renommer le sélecteur pour correspondre à votre propre classe. Il est conçu pour les développeurs front-end qui agencent des cartes, tableaux de bord et structures de page et veulent un CSS grid-template correct sans compter les lignes à la main. L'éditeur s'exécute entièrement dans votre navigateur, donc rien de ce que vous tapez n'est téléversé.

Fonctionnalités

Comment utiliser Générateur CSS Grid

  1. Choisissez combien de colonnes et de lignes votre mise en page nécessite
  2. Dimensionnez chaque piste avec fr, px, %, auto ou minmax()
  3. Définissez l'espacement, et un espacement de colonne s'il doit différer
  4. Cliquez sur deux cellules de l'aperçu pour fusionner une région étendue
  5. Copiez le CSS généré dans votre feuille de style

Exemple

Entrée

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Sortie

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

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Trois colonnes égales se condensent en repeat(3, 1fr) et les cellules fusionnées s'étendent sur trois pistes.

Erreurs courantes et dépannage

Foire aux questions

Que produit le générateur CSS Grid ?
Il produit une règle de conteneur avec display: grid, grid-template-columns, grid-template-rows et gap, plus une règle grid-column / grid-row pour chaque région fusionnée que vous créez. Vous copiez tout le bloc dans votre feuille de style.
Quand mes pistes se condensent-elles en repeat() ?
Trois pistes adjacentes identiques ou plus se replient en repeat(n, valeur). Une ou deux à la suite restent écrites en entier, car repeat() ne raccourcit la sortie qu'à partir de trois pistes. Les séquences mixtes entremêlent des pistes littérales et des groupes repeat().
Comment fusionner des cellules pour s'étendre sur plusieurs colonnes ou lignes ?
Cliquez sur une cellule de l'aperçu, puis cliquez sur une seconde cellule. L'outil sélectionne le rectangle entre elles et écrit grid-column et grid-row avec la bonne ligne de départ et la bonne étendue. Cliquez à nouveau sur un bloc fusionné pour le rescinder en cellules individuelles.
Puis-je utiliser minmax(), auto et des pourcentages pour les tailles de piste ?
Oui. Chaque piste accepte une valeur fr, une longueur en pixels, un pourcentage, auto ou minmax(min, max). Les nombres nus sont traités comme des fr, et l'espacement de minmax() est normalisé pour que le CSS copié soit cohérent.
Pourquoi la règle générée utilise-t-elle un sélecteur :nth-child() ?
Les régions fusionnées sont placées par position, donc l'outil cible les enfants de la grille dans l'ordre du source avec :nth-child(). Renommez le sélecteur de conteneur avec votre propre classe, et les règles de placement le suivent automatiquement.
La grille que je conçois est-elle envoyée quelque part ?
Non. Le générateur CSS Grid construit le CSS de modèle et de placement entièrement dans votre navigateur. Les colonnes, lignes, espacements et cellules fusionnées que vous définissez ne quittent jamais votre appareil et ne sont pas téléversés vers ArrayKit.

Outils associés

Tous les outils ArrayKit