Bac à sable CSS Grid

Tous les outils

Composez visuellement des modèles CSS Grid, espacements et placements, puis copiez le CSS de mise en page.

Aperçu

Cliquez sur un élément numéroté de la grille pour le sélectionner et le repositionner.

grid-template-columns —
grid-template-rows —
CSS généré
—
—
Colonnes
Lignes
Espacements
16px
16px
Alignement
Éléments de la grille
Élément 1
Préréglages

À propos de Bac à sable CSS Grid

Le CSS Grid Playground compose des grilles réelles de façon visuelle. Ajoutez et supprimez des pistes de colonnes et de lignes pour façonner grid-template-columns et grid-template-rows, réglez les espacements entre colonnes et lignes, et ajustez les quatre propriétés d'alignement — justify-items, align-items, justify-content et align-content — pendant que l'aperçu reflète chaque changement instantanément.

Le placement des éléments, c'est là que les grilles deviennent puissantes: ajoutez des éléments, cliquez sur l'un d'eux dans l'aperçu pour le sélectionner, puis positionnez-le avec column start, column span, row start et row span. C'est ainsi que les barres latérales, en-têtes et cellules vedettes s'étendent sur plusieurs pistes — la technique derrière presque toutes les grilles réelles.

Trois préréglages — holy grail, dashboard et gallery — chargent des structures de page classiques que vous pouvez disséquer et adapter. Une fois la mise en page satisfaisante, copiez le CSS généré, qui contient l'ensemble des règles du conteneur de grille et le placement de chaque élément.

Comment utiliser Bac à sable CSS Grid

  1. Ajoutez ou supprimez des pistes de colonnes et de lignes pour définir le modèle de grille.
  2. Réglez l'espacement des colonnes et des lignes.
  3. Ajustez les contrôles d'alignement: justify-items, align-items, justify-content et align-content.
  4. Ajoutez des éléments, cliquez sur l'un dans l'aperçu, et définissez son début/étendue de colonne et de ligne pour le placer.
  5. Chargez le préréglage holy grail, dashboard ou gallery pour étudier une mise en page classique.
  6. Copiez le CSS généré dans votre feuille de style.

Questions fréquentes

justify-items aligne chaque élément à l'intérieur de sa propre cellule de grille; justify-content aligne l'ensemble de la grille dans le conteneur lorsque les pistes ne le remplissent pas entièrement. La même distinction s'applique verticalement entre align-items et align-content.

Sélectionnez l'élément et augmentez son étendue de colonne — le CSS généré utilise grid-column avec une valeur span. Combiné à une étendue de ligne, vous pouvez créer des barres d'en-tête, des barres latérales et de grandes cellules vedettes au sein de la même grille.

Le squelette de page classique: un en-tête et un pied de page pleine largeur avec trois colonnes entre eux — navigation, contenu principal et une colonne latérale. C'était notoirement fastidieux avec les floats; le préréglage montre comment quelques placements de grille résolvent cela proprement.

Grid excelle dans les mises en page bidimensionnelles où lignes et colonnes doivent s'aligner — structure de page, tableaux de bord, galeries. Flexbox convient mieux aux flux unidimensionnels comme les barres d'outils et les menus. Ils se combinent bien: grid pour la page, flex à l'intérieur des composants.

Oui, il est gratuit et fonctionne dans le navigateur — expérimentez autant que vous voulez, rien de ce que vous créez ne quitte votre machine.
Partager
Outils similaires
Générateur de signature e-mail Créez une signature e-mail HTML professionnelle parmi 30 modèles, personnalisez-la et enregistrez-la. Gratuit
Icône en PNG Convertissez Bootstrap Icons, Font Awesome et plus en images PNG personnalisées — gratuit, dans votre navigateur. Gratuit
Générateur d'icônes d'app Générez un jeu complet d'icônes prêtes à publier pour l'App Store et Google Play — superbes fonds dégradés, mesh et motifs, à partir de votre logo. Gratuit
Générateur de favicon Créez un pack complet de favicons à partir d'un logo, d'une icône ou d'un monogramme — favicon.ico, PNG modernes, icône Apple, icônes PWA, manifeste web et extrait HTML. Gratuit
Générateur d'ombre portée CSS Composez des ombres portées CSS en couches avec des curseurs en direct pour le décalage, le flou, l'étalement, la couleur, l'opacité et le mode intérieur — prévisualisez sur un vrai élément et copiez le CSS prêt à coller instantanément. Gratuit
Générateur de border-radius CSS Créez visuellement des border-radius CSS avec aperçu en direct et copiez un code prêt pour la production. Gratuit
Recherches populaires
générateur css grid bac à sable css grid générateur grid-template-columns générateur de mise en page css grid constructeur grid-template-areas outil de gap css grid visualiseur css grid
Besoin d'aide ?
Un problème avec cet outil ? Signalez-le à notre équipe.
Signaler un problème

Ajoutez cet outil gratuit à votre propre site web — copiez-collez le code ci-dessous.