Grid System - EGS Gallois Sisal¶
Grille Fluide (Responsive)¶
Nous utilisons une grille de 12 colonnes standard pour structurer le contenu.
Breakpoints¶
| Taille | Largeur Min | Colonnes | Gouttière (Gap) | Marge Extérieure |
|---|---|---|---|---|
| Mobile | 320px | 4 | 16px | 16px |
| Tablet | 768px | 8 | 24px | 32px |
| Desktop | 1024px | 12 | 32px | 64px |
| Large | 1440px | 12 | 40px | Auto (Max-width 1280px) |
Règles de Mise en Page¶
- Conteneur : Le contenu principal est toujours centré avec une
max-widthde 1280px (classe.container). - Alignement : Les textes sont alignés sur la grille de base de 4px (Baseline Grid) pour un rythme vertical cohérent.
- Espacement : Utilisez toujours les variables d'espacement (
--spacing-sm,--spacing-md, etc.) pour les marges, jamais de valeurs magiques.
Exemples de Layout¶
- Hero : Pleine largeur (12 cols).
- Cartes Produits :
- Desktop : 3 cartes par ligne (4 cols chacune).
- Tablet : 2 cartes par ligne (4 cols chacune).
- Mobile : 1 carte par ligne (4 cols).
- Texte + Image (Storytelling) : 6 cols Texte / 6 cols Image.