La Grille Responsive

Pourquoi c'est important

La grille 12 colonnes est le standard de l'industrie. Divisible par 1, 2, 3, 4, 6 et 12, elle offre une flexibilite maximale pour tous les layouts, de mobile a desktop.

Le framework

1. 01

   Mobile

   0 - 479px (XS); 4 colonnes; Margins : 16px; Gutter : 16px

2. 02

   Tablet

   480 - 767px (SM); 8 colonnes; Margins : 24px; Gutter : 20px

3. 03

   Desktop

   768 - 1279px (MD/LG); 12 colonnes; Margins : 32px; Gutter : 24px

4. 04

   Large

   1280px+ (XL); 12 colonnes; Max-width : 1200-1440px; Gutter : 24-32px

5. 05

   Fluid (recommande)

   Les colonnes s'adaptent en pourcentage. Le contenu remplit l'espace disponible. Mobile-first par nature.

6. 06

   Fixed

   Largeur fixe par breakpoint. Plus previsible pour le design, mais sauts visuels entre les breakpoints.

7. 07

   Les combinaisons cles

   12 colonnes = pleine largeur (hero, banner); 6+6 = deux colonnes egales (comparaison); 4+4+4 = trois colonnes (cards, features); 3+3+3+3 = quatre colonnes (grille de produits); 8+4 = contenu principal + sidebar

Pour aller plus loin