Outils · CSS · Bac à sable Grid
Bac à sable Grid
Créez une mise en page CSS grid - nombre de pistes, espacements, alignement, et placement par élément - avec un aperçu en direct, et copiez le code.
Ajoutez un fichier et lancez l’outil.
Votre fichier est prêt.
Essayez un autre fichier, ou réessayez.
Réglages
Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.
Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.
Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.
Comment ça marche
Choisissez un modèle prédéfini, ou partez de la grille 3×3 par défaut.
Réglez le nombre de colonnes et de lignes, l'espacement et l'alignement.
Sélectionnez un élément pour le placer avec un début et une étendue personnalisés, puis copiez le CSS.
Questions fréquentes
Non. La grille et le CSS généré sont entièrement construits dans votre navigateur.
Un placement personnalisé au-delà du nombre de colonnes ou de lignes explicite crée automatiquement une piste implicite supplémentaire - c'est du CSS valide, pas un bug.
justify-items positionne le contenu à l'intérieur de chaque cellule. justify-content positionne l'ensemble des pistes à l'intérieur du conteneur - la différence n'est visible que lorsque les pistes ne remplissent pas le conteneur.
Oui, et c'est normal. L'axe des colonnes d'une grille suit le sens de la page, donc la colonne 1 s'affiche du côté physique opposé en RTL, sans aucun code supplémentaire - cet outil montre le vrai comportement de CSS Grid, pas une approximation de gauche à droite.
Guides
Un aperçu plus précis de problèmes concrets que résout cet outil.
Why CSS Grid Draws the Layout Before the Content Arrives
Most CSS layout starts with the content and lets the container follow. Grid turns that around: the parent declares rows and columns first, and items are placed onto its lines. That is why grid feels strange at first and why it holds alignment so well.
Lire le guideHow to Make a Grid Item Span Two Columns
grid-column: 1 / span 2 makes an item cover two columns. Where you put the start line, whether you also pin the row, and what happens to the items after it are the parts that decide whether the rest of the grid still looks right.
Lire le guideThe Holy Grail Layout With CSS Grid, and What to Change After
Header, footer, a main column between two sidebars: grid does the holy grail layout in a few lines. The first version has equal rows and equal columns, though, and that is rarely what a real page wants. Here is the whole path from preset to page.
Lire le guide
Commentaires