La grille de mise en page de Foundation

Qu’est ce qu’une grille de mise en page?

Je reprends ce que nous avons publié dans un ancien article « Comprendre le concept de grille dans le webdesign« . une grille est une structure comprenant une série de lignes horizontales et verticales, utilisées pour organiser le contenu d’une page web.

Les grilles sont un élément essentiel en Webdesign, elle vous permet d’organiser harmonieusement le contenu présent sur vos pages.

La grille de Foundation 6

La grille de mise en page de Foundation utilise 12 colonnes par défaut, avec la possibilité de 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.

Exemple de disposition des blocs dans une grille de 12 colonnes

Exemple de disposition des blocs dans une grille de 12 colonnes

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.

Exemples :

  • la classe .medium-7 indique que le bloc est aligné sur sept colonnes pour les écrans de taille moyenne et les écrans larges.
  • la classe .large-9 indique que le bloc est aligné sur neuf colonnes pour les écrans larges.
  • la classe .small-3 indique que le bloc est aligné sur trois colonnes pour les petits écrans, les écrans moyens et larges.

Le préfixe [size] peut etre remplacé par :

  • small pour les écrans plus larges que 0 pixel,
  • medium pour les écrans plus larges que 640 pixels,
  • large pour les écrans plus larges que 1024 pixels,
  • xlarge pour les écrans plus larges que 1200 pixels,
  • xxlarge pour les écrans plus larges que 1440 pixels.
Attention, si vous ne définissez une mise en page que pour les petits écrans, avec l’utilisation de small, cette mise en page va aussi s’appliquer à tous les écrans plus grands (moyens et larges). De même, si vous ne définissez la grille que pour les écrans larges, avec l’utilisation de large, les blocs vont s’aligner sur toute la largeur de la grille, pour les écrans plus petits (medium et small).

Laisser un commentaire