Sommaire

Une grille avec la seule petite taille d’écran

1. La mise en page

Nous allons maintenant créer une grille opposée à la précédente. Dans cette grille nous n’allons que définir les alignements pour les petits écrans avec .small-[n], sans indiquer l’alignement pour les écrans larges.

Cela implique que la mise en page sera identique sur les petits écrans, sur les écrans de taille moyenne et sur les écrans larges.

Voici le code HTML de cet exemple :

<div class="row"> 
  <div class="small-2 columns"> 
     <p>Cum sociis natoque penatibus...</p> 
  </div> 
  <div class="small-4 columns"> 
     <p>Cras justo odio, dapibus...</p> 
  </div> 
  <div class="small-6 columns"> 
     <p>Sed posuere consectetur est...</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="small-3 columns"> 
     <p>Vivamus sagittis lacus vel...</p> 
  </div> 
  <div class="small-6 columns"> 
     <p>Donec sed odio dui. Nullam id dolor...</p> 
  </div> 
  <div class="small-3 columns"> 
     <p>Etiam porta sem malesuada...</p> 
  </div> 
</div>

Le fichier ...