Mise en page CSS Grid avec barre latérale + contenu
Concevez visuellement des mises en page CSS Grid : définissez les colonnes, les lignes et l’espacement, puis tapez des noms de zone dans les cellules pour construire grid-template-areas — avec un aperçu en direct et du code CSS et HTML prêt à copier.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
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 200px à côté d’une colonne de contenu flexible qui prend l’espace restant. Les deux zones sont immédiatement visibles dans l’aperçu en direct, colorées et étiquetées pour que la séparation soit évidente au premier coup d’œil.
C’est la forme navigation-plus-contenu la plus courante sur le web — les pages de paramètres, les sites de documentation et les tableaux de bord d’administration reposent tous sur un rail de largeur fixe à côté d’une zone principale fluide. Comme la colonne de la barre latérale utilise une valeur en pixels et la colonne de contenu utilise 1fr, la barre latérale conserve une largeur constante tandis que la colonne de contenu absorbe chaque pixel supplémentaire de la fenêtre.
Renommez l’une ou l’autre zone, modifiez la largeur de colonne ou ajoutez davantage de lignes pour un en-tête au-dessus de la séparation — le code CSS et HTML affiché ci-dessous suit chaque modification en temps réel. L’outil est gratuit et fonctionne entièrement dans votre navigateur, sans téléversement ni compte.