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

Disposition de la grille CSS à 3 colonnes égales

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

Cette page ouvre le générateur de grille défini sur trois colonnes de même largeur sur une seule ligne, avec les zones nommées désactivées — la mise en page est simplement une répétition (3, 1fr), le moyen le plus court de dire "trois colonnes qui divisent toujours la largeur disponible de manière égale".

Les colonnes de largeur égale sont la bête de somme des grilles de cartes, des tableaux de prix et des galeries d'images : aucune zone n'a besoin d'être nommée car chaque colonne joue le même rôle, donc le dimensionnement simple des pistes est plus clair qu'une déclaration de zones de modèle de grille. Ajoutez une rangée et les trois mêmes pistes se répètent en dessous, toujours parfaitement égales.

Augmentez le nombre de colonnes pour une grille plus dense ou activez les zones nommées si une colonne ultérieure doit se démarquer des autres - le CSS et le HTML ci-dessous sont mis à jour au moment où vous le faites. Tout fonctionne côté client, il n'y a donc rien à télécharger ni rien à attendre.

🛡️
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.