Constructeur de grille CSS
CSS Grid Builder
Dispose une grille visuellement avec des zones nommées et rend le CSS grid-template correspondant.
Peint des zones nommées sur une grille en cliquant des cellules, les vérifie contre la règle du rectangle de la spécification, et émet `grid-template-areas` — ou des numéros de lignes si vous préférez. La vérification compte parce qu’une liste de zones invalide est jetée en silence, sans aucune erreur nulle part.
Grille
Une cellule de taille accepte 1fr·240px·auto·minmax(200px, 1fr).
Cliquez sur une cellule pour lui donner le nom de zone ci-dessous. Cliquez sur une cellule puis sur une autre : le rectangle entre les deux est rempli comme une seule zone. Un nouveau clic sur une cellule du même nom la vide.
CSS
Aperçu
Il y a une seule règle à retenir
Une zone nommée doit être un rectangle (CSS Grid Level 2 §7.3.1). Faites un L et toute la déclaration grid-template-areas est jetée, sans la moindre erreur ; c’est pour cela que cet outil vous prévient avant d’écrire le CSS. Trois pistes identiques ou plus à la suite s’écrivent avec repeat().
Pour une disposition à une seule dimension, le bac à sable Flexbox est plus simple.
Comment s’en servir
Partez d’une disposition
En-tête, barre latérale, contenu principal et pied de page ; une rangée de cartes ; un tableau de bord ; un article centré. Ou construisez la vôtre à partir d’une grille vide.
Nommez une zone et cliquez les cellules
Tapez le nom, puis cliquez. Cliquez une cellule puis une autre pour remplir le rectangle entre les deux ; cliquez de nouveau une cellule du même nom pour l’effacer.
Réglez la taille des pistes
Les cases en haut et à gauche acceptent `1fr`, `240px`, `auto` ou `minmax(200px, 1fr)`. Trois pistes identiques ou plus sont écrites avec `repeat()`.
Questions fréquentes
Pourquoi ma zone en L ne marche-t-elle pas ?
Parce qu’une zone nommée doit être un rectangle — CSS Grid Level 2 §7.3.1. Si elle ne l’est pas, la déclaration `grid-template-areas` entière est invalide et le navigateur l’abandonne sans la moindre erreur. Cet outil vous le dit avant d’écrire le CSS, et c’est le seul avertissement que vous aurez.
Zones nommées ou numéros de lignes ?
Les zones se lisent mieux et survivent à l’insertion d’une piste. Les numéros de lignes sont la seule option quand un élément s’étend sur une piste qui n’existe pas à chaque point de rupture, ou quand la grille est générée. Le sélecteur écrit l’une ou l’autre.
Comment laisser une cellule vide ?
Ne lui donnez pas de nom. Elle s’écrit `.` dans le gabarit, c’est-à-dire le jeton de cellule nulle de la spécification — un point par cellule vide, et une suite de points doit encore laisser chaque zone nommée rectangulaire.
Pourquoi `fr` ne descend-il pas sous la taille du contenu ?
Parce que `1fr` signifie `minmax(auto, 1fr)`, et que ce minimum `auto` est la taille du contenu. Utilisez `minmax(0, 1fr)` quand vous voulez une piste qui puisse réellement devenir plus étroite que ce qu’elle contient — le correctif classique de l’enfant de grille qui refuse de rétrécir.
À alimenter depuis
Bac à sable Flexbox
Flexbox Playground
Actionne chaque propriété flex sur un exemple vivant et montre le CSS ainsi que ce que chaque propriété a changé.
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Calculateur de taille fluide
Fluid Size Calculator
Calcule une expression clamp() qui fait varier une taille en douceur entre deux largeurs de fenêtre.
Formater ou minifier du CSS
CSS Beautifier & Minifier
Met en forme ou minifie du CSS sans rien réordonner, en conservant le flux de jetons à l’identique.
Bac à sable Flexbox
Flexbox Playground
Actionne chaque propriété flex sur un exemple vivant et montre le CSS ainsi que ce que chaque propriété a changé.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.