# Espace et densité Une échelle à sept étapes pour chaque espace. Liée au raffinement (peu de valeurs, toujours les mêmes) et à "jamais compliqué" (espace pour que chaque chose soit vue dans sa propre intégrité). ## L'échelle Tout espace provient d'une seule échelle à sept étapes. Personne ne choisit "environ 20 pixels" : vous choisissez une étape. space-1 4px space-2 8px space-3 16px space-4 24px space-5 40px space-6 64px space-7 96px ## Plus proche, plus unis Ce qui appartient ensemble reste proche (icône et mot : `space-1`) ; les parties différentes restent séparées (entre les sections : `space-7`). L'espace indique ce qui forme un groupe, pas des lignes ou des boîtes. Do **Rappel**Mardi, 9 h**Sauvegarde**Tout de nuit Titre et détail ensemble ; un élément loin du suivant. Don’t **Rappel**Mardi, 9 h**Sauvegarde**Tout de nuit Tout avec la même espacement : vous ne pouvez pas dire quel détail appartient à quel titre. ### Aucun espace hors de l'échelle Si aucune étape ne convient, la composition est incorrecte, pas l'échelle. ## Densité dépend de l'écran Les pages de lecture respirent. Les écrans de travail, avec des tableaux et des formulaires à scanner et agir en masse, sont compacts : `data-density="compact"` sur la zone de travail resserre les cellules et les contrôles et laisse le texte seul. Changer la densité anime : les lignes se rétractent, elles ne sautent pas. Planning Lorsque Sauvegarde hebdomadaire Dimanche, 3 heures Arroser les plantes Mardi, 9 heures Rapport mensuel Le 1er, 8 h ## Largeur et grille ### Une colonne de lecture dispose d'une mesure Elle ne dépasse jamais la largeur confortable (`measure-reading`, environ 70 caractères par ligne). ### Une grille ne grandit jamais au-delà de l'écran Une colonne de grille, par défaut, ne se rétrécit pas en dessous de son contenu : un tableau large étire la colonne et toute la page commence à défiler horizontalement. Utilisez `minmax(0, 1fr)` pour les colonnes, et laissez le contenu large défiler dans sa propre boîte. Do Une colonne de lecture confortable permet à l'œil de revenir au début de la ligne suivante sans se perdre. Lorsque la ligne s'étend d'un bord à l'autre sur un écran large, chaque retour devient une recherche, et la lecture s'épuise avant la fin du paragraphe. La colonne s'arrête à une mesure confortable, même avec de la place en surplus. Don’t Une colonne de lecture confortable permet à l'œil de revenir au début de la ligne suivante sans se perdre. Lorsque la ligne s'étend d'un bord à l'autre sur un écran large, chaque retour devient une recherche, et la lecture s'épuise avant la fin du paragraphe. La ligne s'étend aussi loin que le boîtier le permet : sur un écran large, l'œil se perd dans le retour. ```css .colunas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } ``` Do Planning · Quand · Statut · Exécution · Propriétaire · Dernière exécution Une autre colonne Avec minmax(0, 1fr), la colonne respecte le boîtier et le contenu large défile à l'intérieur. Don’t Planning · Quand · Statut · Exécution · Propriétaire · Dernière exécution Une autre colonne Avec 1fr, la colonne grandit avec son contenu et dépasse la ligne pointillée : sur mobile, toute la page défile horizontalement. Cette règle vient d'une erreur réelle : le premier showcase de Feitio a défilé de 34px sur mobile à cause d'un tableau.