⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de grille CSS

Concevez visuellement les mises en page de grille CSS : définissez les colonnes, les lignes et les espaces, puis saisissez les noms de zones dans les cellules pour créer des zones de modèle de grille - avec un aperçu en direct et des CSS et HTML copiables.

Tapez un nom dans n'importe quelle cellule ci-dessous ; les cellules portant le même nom fusionnent en une seule région de zones de modèle de grille.

Traitement... 0%

Résultat

Une déclaration de zones de modèle de grille est l'un des éléments CSS les plus lisibles qui soient, mais seulement une fois qu'elle existe - y arriver manuellement signifie compter les chaînes entre guillemets et les longueurs de lignes correspondantes, et une cellule incompatible brise silencieusement toute la mise en page. Ce générateur transforme cela en manipulation directe : définissez le nombre de colonnes et de lignes, saisissez un nom dans n'importe quelle cellule de la grille en direct et les noms correspondants fusionnent automatiquement dans une région nommée.

Sous le capot, chaque cellule que vous laissez vide devient un point dans la chaîne de zones de modèle de grille générée, et chaque cellule que vous nommez fait partie du rectangle de ce nom. CSS permet uniquement à une région nommée d'occuper un bloc rectangulaire propre, de sorte que l'outil vérifie cela au fur et à mesure que vous tapez et vous indique exactement quand un nom ne forme pas encore un rectangle valide - au lieu de produire silencieusement du CSS, le navigateur le rejettera.

L'espacement des colonnes et l'espacement des lignes sont par défaut de 8 px et se combinent en une seule ligne d'espacement lorsqu'ils correspondent, et la grille d'aperçu en direct reflète toujours vos pistes de colonnes de modèle de grille et de lignes de modèle de grille, y compris les colonnes de pixels fixes d'un préréglage comme les rails latéraux de 200 px du Saint Graal. La sortie copiable couvre les deux côtés : un bloc CSS prêt pour votre feuille de style et un squelette HTML correspondant avec un div de zone de grille par région nommée.

Grid et flexbox résolvent différents problèmes de mise en page, et le générateur css-flexbox-generator de ce site est le meilleur point de départ pour les mises en page unidimensionnelles : une seule ligne ou colonne d'éléments flexibles tels qu'une barre de navigation ou une pile de cartes. Utilisez plutôt ce générateur de grille lorsque vous avez besoin d'un contrôle bidimensionnel, de lignes et de colonnes explicites ou de régions nommées comme en-tête/nav/main/pied de page ; les deux outils se retrouvent souvent sur la même page, grille pour le shell de la page et flexbox à l'intérieur de ses morceaux. Comme tous les outils de ce site, il fonctionne entièrement dans votre navigateur : pas de téléchargement, pas de compte.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Nombre d'entrées pour 1 à 6 colonnes et lignes, ainsi que des contrôles séparés d'espacement de colonnes et d'espacement de lignes qui se combinent en une seule valeur d'espacement lorsqu'ils correspondent.
  • Un mode zones nommées : saisissez un nom de zone directement dans n'importe quelle cellule de la grille dynamique ; l'outil construit une chaîne de zones de modèle de grille valide et avertit lorsque les noms ne forment pas des rectangles propres.
  • Bloc CSS copiable (affichage : grille, colonnes/lignes de modèle de grille, espace, zones de modèle de grille) plus un squelette HTML correspondant avec un div de zone de grille par région nommée.

Avantages clés

✓ Tapez un nom directement dans n'importe quelle cellule et les noms correspondants fusionnent dans une seule région de zones de modèle de grille - pas de sélection par glisser-déposer, pas de devinette manuelle de la syntaxe des chaînes entre guillemets.
✓ La grille d'aperçu en direct se redimensionne et se recolore à chaque modification, de sorte que vous voyez les pistes exactes des colonnes et des lignes ainsi que chaque région nommée avant de copier une seule ligne de CSS.
✓ Les préréglages tels que la disposition classique du Saint Graal et une barre latérale étroite vous offrent une véritable déclaration de zones de modèle de grille fonctionnelle à partir de laquelle commencer au lieu d'une grille vierge.

Cas d'utilisation

  • • Créez le shell de page classique du Saint Graal - en-tête et pied de page pleine largeur avec une ligne centrale de navigation/principale/aside - en tapant les noms de zone au lieu d'écrire à la main les zones de modèle de grille.
  • • Disposez une page de paramètres ou un tableau de bord d'administration avec une barre latérale de largeur fixe à côté d'une colonne de contenu flexible et copiez le CSS et le HTML exacts une fois que l'aperçu en direct semble correct.
  • • Vérifiez qu'un ensemble de zones nommées forme réellement des rectangles valides avant l'expédition - l'outil signale les noms exacts qui briseraient les zones de modèle de grille dans le navigateur.