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

Barre latérale + disposition de la grille CSS de contenu

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 avec une disposition à deux colonnes et une ligne déjà nommée : une colonne de barre latérale de 200 px à côté d'une colonne de contenu flexible qui occupe l'espace restant. Les deux zones sont immédiatement visibles dans l'aperçu en direct, colorées et étiquetées afin que la division soit évidente en un coup d'œil.

Il s'agit de la forme de navigation et de contenu la plus courante sur le Web : les pages de paramètres, les sites de documentation et les tableaux de bord d'administration s'appuient tous sur un rail de largeur fixe à côté d'une zone principale fluide. Étant donné que la colonne de la barre latérale utilise une valeur de pixel et que la colonne de contenu utilise 1fr, la barre latérale reste d'une largeur constante tandis que la colonne de contenu absorbe chaque pixel supplémentaire de la fenêtre d'affichage.

Renommez l'une ou l'autre zone, modifiez la largeur de la colonne ou ajoutez plus de lignes pour un en-tête au-dessus de la division : les sorties CSS et HTML ci-dessous suivent chaque modification en temps réel. L'outil est gratuit et continue de fonctionner entièrement dans votre navigateur, sans téléchargement ni 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.