ZenovayTools

Générateur de grille CSS

Construisez des mises en page CSS Grid avec un éditeur visuel. Définissez les colonnes, les lignes, les espacements et l'étendue des cellules.

Preview (click cells to span)
12px
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
}

Comment utiliser Générateur de grille CSS

  1. 1Définissez le nombre de colonnes et de lignes pour votre disposition de grille.
  2. 2Ajustez les largeurs de colonnes et les hauteurs de lignes à l'aide des contrôles.
  3. 3Cliquez et glissez pour étendre les cellules sur plusieurs colonnes ou lignes.
  4. 4Définissez l'espace entre les cellules de la grille.
  5. 5Copiez le code CSS Grid généré.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur de gradient CSS
Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.
Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.

Questions fréquemment posées

Qu'est-ce que CSS Grid ?▾
CSS Grid Layout est un système de mise en page bidimensionnel pour le web. Il vous permet de disposer les éléments en rangées et colonnes, facilitant la conception de mises en page complexes sans flottants ni positionnement.
Comment fonctionnent grid-template-columns et grid-template-rows ?▾
grid-template-columns définit le nombre et la largeur des colonnes, tandis que grid-template-rows définit le nombre et la hauteur des rangées. Utilisez les unités fr pour des proportions flexibles, px pour des tailles fixes, ou auto pour un dimensionnement basé sur le contenu.
Qu'est-ce que l'unité fr ?▾
L'unité fr (fraction) représente une fraction de l'espace disponible dans le conteneur de grille. Par exemple, 1fr 2fr crée deux colonnes où la seconde est deux fois plus large que la première.
Comment étendre des éléments sur plusieurs cellules ?▾
Cliquez sur une cellule de grille pour commencer une extension, puis cliquez sur une cellule adjacente pour l'étendre. L'outil génère des règles grid-column et grid-row span pour l'élément sélectionné.
Peut-on utiliser cet outil sur téléphone ?▾
Oui, le générateur CSS Grid fonctionne dans tout navigateur mobile moderne. Configurez votre mise en page de grille visuellement et copiez le CSS sur n'importe quel appareil.
Le CSS généré inclut-il le balisage HTML ?▾
Oui. L'outil génère à la fois les styles CSS de grille et une structure HTML correspondante, vous permettant de copier une mise en page de grille complète et fonctionnelle directement dans votre projet.
Puis-je personnaliser l'espacement entre les cellules de grille ?▾
Oui. Ajustez les valeurs d'espacement de rangée et de colonne pour contrôler l'espacement entre les éléments de grille. L'outil utilise la propriété CSS gap standard, supportée dans tous les navigateurs modernes.