Wensity Layout
La mise en page est la façon dont une page indique aux gens ce qui est important et ce qui va ensemble, avant même qu'ils ne lisent un mot. Une bonne mise en page repose sur trois habitudes : une échelle d'espacement fixe, un regroupement par distance, et un système d'alignement unique. Cette compétence met en place ces trois éléments et couvre la structure responsive.
Si le projet a déjà une échelle d'espacement et des largeurs de conteneur, utilisez-les.
1. L'échelle d'espacement
Utilisez une base de 4 px. Chaque marge, padding et espacement provient de cette liste :
| Jeton | px | Utilisation typique |
|---|---|---|
| 1 | 4 | icône à étiquette, espacements inline serrés |
| 2 | 8 | à l'intérieur d'un contrôle, entre une étiquette et son champ |
| 3 | 12 | entre les éléments d'une liste dense, padding y des boutons |
| 4 | 16 | padding de carte (compact), espacement entre contrôles liés, gouttière mobile |
| 5 | 20 | padding x des boutons (grand) |
| 6 | 24 | padding de carte, espacement entre champs de formulaire |
| 8 | 32 | entre les groupes à l'intérieur d'une section |
| 10 | 40 | entre un titre de section et son contenu (grand) |
| 12 | 48 | padding de section sur mobile |
| 16 | 64 | entre les sections dans une application, padding de section sur tablette |
| 20 | 80 | |
| 24 | 96 | padding de section sur les pages marketing desktop |
| 32 | 128 | padding hero, l'espace autour d'une grande déclaration |
L'échelle par défaut de Tailwind suit déjà une base de 4 px (p-4 correspond à 16 px), utilisez donc
ses paliers et n'inventez pas de p-[13px]. Les valeurs impaires sont autorisées uniquement pour les
corrections optiques que vous avez vérifiées dans le rendu (une icône qui semble décalée de 1 px).
2. Regrouper par distance
La règle de mise en page la plus importante : l'espace à l'intérieur d'un groupe est plus petit que l'espace entre les groupes. Une étiquette se trouve à 8 px de son champ ; le champ suivant se trouve à 24 px. Le titre d'une carte se trouve à 8 px au-dessus de son texte ; la carte suivante se trouve à 24 px. Lorsque les espacements intérieur et extérieur sont égaux, tout flotte et rien ne se lit comme un groupe.
- Visez un rapport d'environ 1 à 2 ou 1 à 3 entre les espacements intérieur et extérieur.
- Plus d'espace au-dessus d'un titre qu'en dessous. Le titre appartient au contenu qui le suit. Typiquement : 48 px au-dessus d'un titre de section, 16 px en dessous.
- Espacement avant les boîtes. Regroupez d'abord par distance. N'ajoutez une bordure, un séparateur ou un fond que lorsque la distance ne suffit pas (tableaux denses, barres d'outils, contenu sur des fonds chargés). Une boîte autour de chaque groupe alourdit une page.
- Utilisez
gappour les éléments frères (flex gap-4,grid gap-6) au lieu de marges sur les enfants. Cela maintient l'espacement au même endroit et évite les marges parasites aux extrémités d'une liste.
3. Rythme, pas uniformité
Une page où chaque section a un padding de 96 px, un titre centré et une grille de trois éléments n'a aucun rythme. Variez la densité intentionnellement :
- Alternez les sections denses (grilles de fonctionnalités, tableaux, logos) avec des sections aérées (une déclaration, une grande image).
- Laissez les sections importantes prendre plus d'espace. L'espace est la façon dont vous dépensez l'attention.
- Ne répétez une mise en page que lorsque le contenu est véritablement du même type.
4. Alignement
- Un seul bord de départ. Les titres, paragraphes, boutons et images d'une section partagent la même ligne de départ. La plupart des plaintes « quelque chose cloche » sont dues à deux bords distants de quelques pixels.
- Alignez au début par défaut (
text-align: start, qui est à gauche en anglais et à droite en arabe ou hébreu). Centrez uniquement le contenu court et autonome : un titre hero, un bloc CTA unique, un état vide. Les formulaires, tableaux, listes et textes longs sont alignés au début. - Alignez les nombres à la fin dans les tableaux et les colonnes de statistiques.
- Alignez sur le texte, pas sur les boîtes. Une icône à côté d'une étiquette s'aligne sur la hauteur
de la lettre ou le centre de l'étiquette, pas sur le haut de la boîte de ligne. Dans les rangées flex,
items-centerpour les lignes simples ;items-startplus une petite marge supérieure sur l'icône pour le texte multiligne. - Ajustements optiques : les icônes de lecture, les flèches et les formes rondes semblent décentrées lorsqu'elles sont centrées mathématiquement. Décalez de 1 à 2 px après avoir vu le résultat.
5. Conteneurs et largeurs
| Conteneur | Largeur max | Utilisation |
|---|---|---|
| Prose | 65 ch (environ 640 à 720 px) | articles, documentation, longs paragraphes |
| Étroit | 560 à 640 px | formulaires, connexion, tâches ciblées, déclaration hero centrée |
| Contenu | 1120 à 1280 px | la plupart des sections marketing et pages d'application |
| Large | 1440 à 1600 px | tableaux de bord, galeries, éditeurs |
| Pleine largeur | 100 % | arrière-plans, images, photos de produits qui doivent toucher les bords |
- Gouttière de page : 16 px sur téléphone, 24 px sur tablette, 32 à 48 px sur desktop. Restez cohérent : une valeur de gouttière par point d'arrêt pour tout le site.
- Séparez l'arrière-plan de la largeur du contenu. L'arrière-plan d'une section peut être en pleine largeur tandis que son contenu reste dans le conteneur de contenu.
- Ne laissez pas le texte s'étendre sur toute la largeur sur les grands écrans. Les images et les grilles peuvent grandir ; les paragraphes ne le peuvent pas.
6. Grilles
- 12 colonnes pour les mises en page marketing vous donne des moitiés, des tiers, des quarts et des divisions asymétriques (7 et 5, 8 et 4). Les divisions asymétriques semblent plus conçues que 6 et 6.
- Grilles à remplissage automatique pour les cartes afin que le nombre de colonnes suive l'espace :
.cards { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
Le min(100%, 280px) empêche le débordement sur les écrans plus étroits que 280 px.
auto-fill maintient la largeur de la carte stable lorsqu'il n'y a qu'une ou deux cartes ;
auto-fit étire les quelques cartes pour remplir la ligne. Choisissez intentionnellement.
- Laissez les pistes flexibles rétrécir. Les enfants de grille et flex refusent de rétrécir en dessous
de leur contenu par défaut, ce qui explique pourquoi un texte long ou une large table déborde d'un
tableau de bord. Utilisez
minmax(0, 1fr)pour les pistes flexibles etmin-width: 0(Tailwindmin-w-0) sur les enfants flex qui contiennent du texte :
.app-shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); }
.row > .text { min-width: 0; }
- Hauteurs égales uniquement pour un contenu égal. Les cartes d'une même ligne s'étirent à la plus haute par défaut dans une grille. Correct pour un ensemble de forfaits ; faux lorsqu'une carte est clairement la carte vedette.
- Grilles bento : variez les tailles des tuiles par importance, conservez une seule valeur de gap et donnez à chaque tuile un vrai contenu. Les tuiles décoratives vides ressemblent à un modèle.
- Utilisez subgrid (
grid-template-rows: subgrid) lorsque les cartes d'une ligne doivent avoir leurs titres, corps et boutons alignés les uns avec les autres.
7. Structure responsive
Concevez d'abord pour le mobile, puis ajoutez de la structure à mesure que l'espace grandit.
- Les points d'arrêt suivent le contenu, pas les appareils. Ajoutez-en un là où la mise en page
commence à sembler incorrecte. Les points d'arrêt par défaut de Tailwind
sm 640,md 768,lg 1024,xl 1280sont parfaitement bien. - Restructurez, ne rétrécissez pas uniquement. Sur mobile, une grille de fonctionnalités à trois colonnes devient une colonne, le texte et l'image côte à côte s'empilent avec l'image en second (ou en premier si elle porte le message), un tableau devient une liste de cartes ou défile horizontalement dans son propre conteneur, une barre latérale devient un tiroir.
- Requêtes de conteneur pour les composants qui apparaissent dans différentes largeurs (une carte dans une barre latérale et dans une colonne principale) :
.card-wrap { container-type: inline-size; }
@container (min-width: 480px) { .card { grid-template-columns: 160px 1fr; } }
Dans Tailwind v4 : @container sur le parent et @md:grid-cols-2 sur l'enfant.
- Mettez à l'échelle l'espacement avec l'écran. Padding de section : 48 px mobile, 64 px tablette, 96 px desktop. Les espacements peuvent passer de 16 à 24 à 32.
- Hauteur de la fenêtre : utilisez
min-h-dvh(ou100dvh), pash-screen(100vh), pour les mises en page en pleine hauteur.100vhest plus haut que la zone visible sur les navigateurs mobiles avec une barre d'outils, donc le contenu se cache en dessous. - Zones de sécurité sur les téléphones avec encoches :
padding-bottom: env(safe-area-inset-bottom)sur les barres inférieures fixes, avecviewport-fit=coverdans la balise meta viewport. - Langues de droite à gauche : utilisez des propriétés logiques (
margin-inline-start,padding-inline,inset-inline-end; Tailwindms-*,pe-*,start-*) au lieu de gauche et droite, et testez avecdir="rtl". Miroir des icônes directionnelles (flèches arrière, chevrons), pas les logos ou toutes les icônes. - Pas de défilement horizontal de page, jamais. Vérifiez à 320 px. Les causes habituelles sont une
largeur fixe, un mot ou une URL long, un élément
w-screen(qui inclut la largeur de la barre de défilement), ou une marge négative.
8. Tableaux
- Ligne d'en-tête dans le rôle d'étiquette, sticky (
position: sticky; top: 0) lorsque le tableau défile, sur une surface teintée ou avec une bordure inférieure plus forte. - Hauteur de ligne par densité : 36 px compact, 44 px par défaut, 52 px confortable. Proposez un bouton de bascule lorsque les utilisateurs diffèrent.
- Lignes séparées par des séparateurs fins ou par une teinte zébrée, pas les deux.
- Nombres alignés à la fin avec
tabular-nums; texte aligné au début ; statut et actions dans les dernières colonnes. - Tableaux larges sur mobile : défilement horizontal dans leur propre conteneur
(
overflow-x: auto) avec la première colonne sticky, ou passez à une carte empilée par ligne. Ne laissez jamais un tableau pousser la page latéralement. - Les états vides, de chargement et d'erreur se trouvent à l'intérieur du cadre du tableau, en conservant l'en-tête pour que l'utilisateur sache ce qui va apparaître.
9. Densité
Adaptez la densité à la fréquence d'utilisation de l'écran :
- Marketing et intégration : aéré. Peu d'éléments par écran, espace généreux, grande typographie.
- Écrans d'application à usage quotidien : compact. Lignes de 36 à 44 px, espacements de 8 à 12 px, texte de 14 px. Les personnes qui utilisent un écran tous les jours veulent en voir plus à la fois.
- Tableaux et outils de données : dense, avec un bouton de bascule de densité si les utilisateurs diffèrent.
- Ne mélangez pas les densités dans un même panneau.
10. Cibles tactiles et zones de clic
- Cible de 44 par 44 px pour tout ce qui est cliquable sur les écrans tactiles, même si l'icône visible fait 16 px. (WCAG 2.2 AA exige au moins 24 par 24 px ; 44 est la taille confortable.) Agrandissez la zone de clic avec du padding, ou avec un pseudo-élément invisible centré sur le contrôle pour que la mise en page ne change pas :
.icon-btn { position: relative; }
.icon-btn::before {
content: ""; position: absolute; left: 50%; top: 50%;
width: max(100%, 44px); height: max(100%, 44px);
transform: translate(-50%, -50%);
}
- Au moins 8 px entre les cibles tactiles séparées pour qu'un pouce n'en touche pas deux.
11. Superposition
Conservez une petite échelle de z-index et n'utilisez que ces valeurs :
:root { --z-dropdown: 10; --z-sticky: 20; --z-overlay: 30; --z-modal: 40; --z-toast: 50; --z-tooltip: 60; }
Les <dialog> natifs ouverts avec showModal() et les éléments avec l'attribut popover
s'affichent dans la couche supérieure du navigateur, au-dessus de tout z-index, donc ils n'en
ont besoin d'aucun. z-index: 9999 signifie que l'empilement n'est pas compris. Corrigez le contexte
d'empilement (souvent un transform, filter ou isolation errant sur un parent)
au lieu d'augmenter le nombre.
12. Éléments sticky et fixes
- En-têtes sticky : gardez-les courts (56 à 64 px) et donnez-leur un arrière-plan (uni ou flouté) uniquement une fois que la page défile en dessous, afin que le haut de la page reste propre.
- Ajoutez un
scroll-margin-topégal à la hauteur de l'en-tête sur les titres ancrés afin que les liens internes n'atterrissent pas sous l'en-tête. - Les barres inférieures fixes sur mobile ont besoin du padding de zone de sécurité ci-dessus et ne doivent pas couvrir le dernier contenu de la page ; rembourrez le bas de la page de la hauteur de la barre.
13. Vérifiez avant de terminer
- Chaque valeur d'espacement est sur l'échelle de 4 px.
- L'espace à l'intérieur des groupes est nettement plus petit que l'espace entre eux.
- Plus d'espace au-dessus des titres qu'en dessous.
- Un seul bord de départ par section ; nombres alignés à la fin dans les tableaux.
- Les pistes flexibles utilisent
minmax(0, 1fr); les enfants de texte peuvent rétrécir. - Les paragraphes sont limités à environ 65 ch, même sur les grands écrans.
- La mise en page se restructure sur mobile au lieu de simplement rétrécir.
- Pas de défilement horizontal à 320 px ; les sections en pleine hauteur utilisent
dvh. - Les cibles tactiles font au moins 44 px (jamais moins de 24 px).
- Les valeurs de z-index proviennent de l'échelle.
- Test plissé : la chose la plus importante et les groupes sont clairs avec les détails floutés.