Sommaire

Une grille pour deux tailles d’écran

1. La mise en page

Dans ce premier exemple, nous allons créer une grille de mise en page qui sera optimisée pour deux types d’écran : pour les écrans larges (large) et pour les écrans de petite taille des smartphones (small).

Nous aurons deux lignes (row) avec trois blocs (<div>) dans chacune de ces lignes.

Pour les petits écrans :

  • pour la première ligne, les trois blocs seront respectivement alignés sur deux, quatre et six colonnes, soit 2+4+6=12 colonnes.

  • pour la deuxième ligne, les trois blocs seront tous alignés sur quatre colonnes, soit 4+4+4=12 colonnes.

images/C03-003.png

Pour les écrans larges :

  • pour la première ligne, les trois blocs seront tous alignés sur quatre colonnes, soit 4+4+4=12 colonnes.

  • pour la deuxième ligne, les trois blocs seront respectivement alignés sur trois, six et trois colonnes, soit 3+6+3=12 colonnes.

images/C03-004.png

Voici le code HTML de cet exemple :

<div class="row"> 
  <div class="small-2 large-4 columns"> 
     <p>Cum sociis natoque penatibus...</p> 
  </div> 
  <div class="small-4 large-4 columns"> 
     <p>Cras justo odio...</p> 
  </div> 
  <div class="small-6 large-4 columns"> 
     <p>Sed posuere consectetur est...</p> 
  </div> 
</div> 
<div class="row"> 
  <div ...