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 avec le sélecteur de mode, puis définissez les propriétés du conteneur à l'aide de simples menus déroulants et de champs numériques : en mode Flex, vous contrôlez flex-direction, flex-wrap, justify-content et align-items ; en mode Grid, vous indiquez le nombre de colonnes et de lignes (rendues sous forme de repeat(n, 1fr)) ainsi que justify-items et align-items. Une valeur de gap et un nombre d'éléments s'appliquent aux deux. Un aperçu en direct de tuiles numérotées montre exactement comment se comportent votre alignement et votre espacement, et la règle .container CSS complète est générée pour que vous la copiiez. Utilisez-le chaque fois que vous voulez voir le rendu réel d'un réglage flex ou grid avant de le coller dans votre projet.

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. En mode Flex, définissez flex-direction, flex-wrap, justify-content et align-items depuis les menus déroulants.
3. En mode Grid, définissez le nombre de colonnes et de lignes, ainsi que justify-items et align-items.
4. Ouvrez les Réglages pour modifier le gap (espacement en px) et le nombre d'éléments affichés dans l'aperçu.
5. Observez l'aperçu des tuiles se réorganiser à mesure que vous changez chaque propriété.
6. Copiez la règle .container CSS générée et collez-la dans votre feuille de style.

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 · columns 3 · rows 2 · justify-items start · align-items stretch · gap 16

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

Flex · direction column · justify-content space-between · align-items stretch · gap 8

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 8px;
}

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 organise les éléments dans une grille bidimensionnelle à l'aide de grid-template-columns et grid-template-rows (écrites sous forme de repeat(n, 1fr)) avec justify-items et align-items. Changez de mode avec le sélecteur pour comparer comment chaque modèle gère le même alignement.

À quoi sert la valeur de gap ?

Le gap définit, en pixels, l'espace entre chaque élément dans les mises en page Flex comme Grid via la propriété CSS gap. Augmentez-le pour écarter les tuiles ou mettez-le à 0 pour une mise en page jointive ; l'aperçu et le CSS généré se mettent à jour instantanément.

Pourquoi justify-content et align-items s'écrivent-ils différemment en Grid ?

Grid utilise les mots-clés start, end, center et stretch pour justify-items et align-items, tandis que Flex utilise flex-start et flex-end. L'outil produit les mots-clés corrects selon le mode dans lequel vous êtes, de sorte que le CSS copié est toujours valide.

Puis-je changer le nombre d'éléments affichés ?

Oui. Ouvrez les Réglages et modifiez le nombre d'éléments pour ajouter ou retirer les tuiles numérotées de l'aperçu (jusqu'à 24). Cela n'affecte que la démonstration à l'écran ; le CSS généré décrit le conteneur, pas les éléments eux-mêmes.

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.