Le Grid System

Pourquoi c'est important

Pourquoi ?Sans grille, chaque décision d'espacement est arbitraire. Le 8-point grid vous donne un système universel : tout s'aligne, tout respire, et votre UI gagne en cohérence instantanement.

Le framework

1. 01

   Base 8px partout

   Tous vos espacements sont des multiples de 8. Padding, margin, gap : 8, 16, 24, 32, 48, 64. Votre UI respire de maniere previsible et harmonieuse.

2. 02

   Colonnes et gouttières

   12 colonnes, gouttieres de 16 ou 24px. C'est le squelette de votre mise en page. Le contenu s'aligne sur les colonnes, pas sur des valeurs arbitraires.

3. 03

   Marges externes

   Les marges laterales definissent la zone de confort. 16px sur mobile, 24-32px sur tablette, 64px+ sur desktop. Elles evitent que le contenu colle aux bords.

4. 04

   Espacement composants

   8px entre elements lies, 16px pour le padding interne, 24px entre groupes logiques. La proximite traduit la relation entre les elements.

5. 05

   Espacement sections

   32 a 48px entre les blocs de contenu, 64px+ entre les grandes sections. L'air entre les blocs cree le rythme vertical de votre page.

6. 06

   Grille responsive

   Vos colonnes passent de 12 a 8 a 4 selon le breakpoint. Les gouttieres et marges s'adaptent. Une seule grille, trois comportements.

7. 07

   Exceptions controlees

   Parfois vous cassez la grille volontairement : un hero full-bleed, une image qui deborde. L'exception est puissante quand le systeme est solide.

8. 08

   Tokens d'espacement

   Nommez vos valeurs : space-xs (8), space-sm (16), space-md (24), space-lg (32). Le dev applique les memes tokens. Zero approximation.

Pour aller plus loin