Bac à sable CSS Flexbox & Grid

Qu'est-ce que Bac à sable CSS Flexbox & Grid ?

Le bac à sable CSS Flexbox & Grid est un environnement visuel gratuit pour apprendre et prototyper les deux principaux modèles de mise en page CSS, conçu pour les développeurs front-end, les étudiants et les designers. Choisissez Flex ou Grid, définissez les propriétés du conteneur et ouvrez les Réglages pour styliser chaque enfant : order, flex-grow, flex-shrink, flex-basis et align-self en mode Flex, ou span de colonne/ligne et align-self en mode Grid. Le mode Grid propose aussi un dimensionnement de pistes personnalisé — saisissez n'importe quelle valeur de grid-template-columns/rows comme 200px 1fr ou repeat(auto-fit, minmax(120px, 1fr)) — et un éditeur visuel grid-template-areas où vous nommez chaque cellule, ce qui crée aussi des lignes de grille nommées. Un aperçu en direct de tuiles numérotées reflète chaque changement, et vous pouvez exporter la seule règle .container ou le conteneur plus le CSS par élément.

Comment utiliser Bac à sable CSS Flexbox & Grid

1. Choisissez Flex ou Grid avec le sélecteur de mode pour décider quel modèle de mise en page construire.
2. Définissez les propriétés du conteneur — flex-direction/wrap et justify/align, ou le nombre de colonnes et de lignes avec justify-items/align-items.
3. Ouvrez les Réglages pour modifier le gap et le nombre d'éléments, et pour styliser chaque enfant (order, flex-grow/shrink/basis, align-self, ou span de colonne/ligne).
4. En Grid, passez le dimensionnement de pistes sur Personnalisé pour saisir vos propres grid-template-columns/rows — px, fr, minmax() ou repeat(auto-fit/auto-fill, …).
5. Activez l'éditeur grid-template-areas et nommez chaque cellule pour placer les éléments par zone.
6. Choisissez d'exporter uniquement le CSS du conteneur ou le conteneur plus le CSS par élément, puis copiez le résultat.

Exemples

Flex · direction row · justify-content center · align-items center · gap 12

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

Grid · custom columns: repeat(auto-fit, minmax(120px, 1fr)) · gap 16

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  grid-template-rows: repeat(2, 1fr);
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Grid · areas: header row, sidebar + main, footer row

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
  justify-items: start;
  align-items: stretch;
  gap: 16px;
}

Flex · export container + items · item 2 flex-grow 1

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

.container > :nth-child(2) {
  flex-grow: 1;
}

Questions fréquentes

Quelle est la différence entre Flexbox et Grid ici ?

Le mode Flex dispose les éléments le long d'un seul axe et expose flex-direction, flex-wrap, justify-content et align-items. Le mode Grid les organise en deux dimensions avec grid-template-columns et grid-template-rows plus justify-items et align-items. Changez de mode avec le sélecteur pour comparer comment chacun gère le même alignement.

Comment styliser des éléments individuels ?

Ouvrez les Réglages et utilisez les réglages par élément pour définir order, flex-grow, flex-shrink, flex-basis et align-self (Flex) ou span de colonne/ligne et align-self (Grid) sur chaque enfant. Mettez Exporter sur « Conteneur + éléments » et l'outil ajoute une règle .container > :nth-child(n) pour chaque élément personnalisé.

Puis-je utiliser des tailles de pistes personnalisées comme auto-fit ou minmax() ?

Oui. En mode Grid, passez le dimensionnement de pistes sur Personnalisé et saisissez n'importe quelle valeur valide de grid-template-columns/rows — pixels, unités fr, minmax() ou repeat(auto-fit/auto-fill, minmax(120px, 1fr)) pour des colonnes responsives. L'aperçu et le CSS généré se mettent à jour à la frappe.

À quoi sert l'éditeur grid-template-areas ?

Activez-le en mode Grid et nommez chaque cellule de la grille ; l'outil assemble une déclaration grid-template-areas et les cellules vides deviennent un point. Nommer des zones crée aussi des lignes de grille nommées, et vous pouvez placer un enfant dans une zone en saisissant son nom dans le champ grid-area de cet élément.

Mes données sont-elles envoyées quelque part ?

Non. Le bac à sable s'exécute entièrement dans votre navigateur en JavaScript, de sorte que vos réglages et le CSS généré ne sont jamais envoyés à un serveur. Il fonctionne en privé et même hors ligne une fois la page chargée.