Sommaire

Créer des décalages

Vous pouvez créer des décalages afin qu’un bloc apparaisse avec un alignement décalé sur la grille. Dans ce cas, vous aurez "un trou" dans la grille, aucun bloc ne sera affiché dans ce décalage. Vous devez utiliser la classe .[size]-offset-[n].

  • Le préfixe [size] indique le préfixe de la taille d’écran ciblée : small, medium ou large.

  • Le suffixe [n] indique le nombre de colonnes sur lesquelles se fait le décalage.

Par exemple .large-offset-3 indique que la taille d’écran ciblée est les écrans larges et que le décalage se fait sur trois colonnes.

Le total des blocs et des décalages doit toujours faire 12.

Voici la grille utilisée :

images/C03-012.png

Voici le code HTML de cet exemple :

<div class="row"> 
  <div class="large-2 columns jaune"> 
     <p>Bloc sur 2 colonnes</p> 
  </div> 
  <div class="large-10 columns bleu"> 
     <p>Bloc sur 10 colonnes</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="large-2 columns vert"> 
     <p>Bloc sur 2 colonnes</p> 
  </div> 
  <div class="large-6 large-offset-4 columns rose"> 
     <p>Bloc sur 6 colonnes, décalage de 4</p> 
  </div> 
</div>  ...