Sommaire

Une grille pour les images

Foundation nous propose d’utiliser une grille de mise en page spécialement élaborée pour les galeries d’images. Nous allons pouvoir définir le nombre de blocs d’image à afficher pour chaque taille d’écran souhaitée. Pour ce faire, il suffit d’utiliser la classe [size]-up-[n] dans la ligne (.row) de la grille.

  • le préfixe [size] indique comme toujours la taille de l’écran ciblé.

  • le suffixe [n] indique comme toujours le nombre de colonnes pour l’alignement.

Dans cet exemple, nous allons demander à avoir un alignement :

  • sur une colonne pour les petits écrans : .small-up-1,

  • sur deux colonnes pour les écrans moyens : .medium-up-2,

  • sur quatre colonnes pour les écrans larges : .large-up-4.

Voici le code HTML utilisé dans cet exemple :

<div class="row small-up-1 medium-up-2 large-up-4"> 
  <div class="column"> 
     <img src="img/hippopotame.jpg" class="thumbnail" alt="Hippopotame"> 
  </div> 
  <div class="column"> 
     <img src="img/loutre.jpg" class="thumbnail" alt="Loutre"> 
  </div> 
  <div class="column"> 
     <img src="img/suricate.jpg" class="thumbnail" alt="Suricate"> 
  </div> 
  <div class="column">  ...