Sommaire

La grille de mise en page de Foundation

La grille de mise en page de Foundation utilise 12 colonnes par défaut. Avec une personnalisation vous pourrez changer ce paramètre.

Les lignes utilisent des boîtes <div> avec la classe .row.

Dans chaque ligne, nous créons les blocs à y afficher avec des boîtes <div> utilisant des classes spécifiques selon l’alignement souhaité et le point de rupture voulu.

La syntaxe générale est : .[size]-[n]. Le préfixe [size] indique la taille d’écran ciblé et le suffixe [n] le nombre de colonnes sur lesquelles est aligné le bloc.

Voici des exemples :

  • la classe .medium-5 indique que le bloc est aligné sur cinq colonnes pour les écrans de taille moyenne et les écrans larges.

  • la classe .large-8 indique que le bloc est aligné sur huit colonnes pour les écrans larges.

  • la classe .small-2 indique que le bloc est aligné sur deux colonnes pour les petits écrans, les écrans moyens et larges.