Sommaire

Une grille simple

Pour ce premier exemple, nous allons créer une grille à deux lignes, avec pour chacune d’entre elle, deux blocs alignés sur 6, 8 et 4 colonnes.

Voici le code HTML utilisé :

<div class="row"> 
  <div class="small-6 columns"> 
     <p>Cum sociis natoque...</p> 
  </div> 
  <div class="small-6 columns"> 
     <p>Cras justo odio...</p> 
  </div> 
</div> 
<div class="row"> 
  <div class="small-8 large-4 columns"> 
     <p>Sed posuere consectetur...</p> 
  </div> 
  <div class="small-4 large-8 columns"> 
     <p>Vivamus sagittis lacus...</p> 
  </div> 
</div>

Le fichier de cet exemple à télécharger est Chapitre 04 / 04-grille-c.html.

Voici le rendu sur un écran large :

images/C04-004.png

Voici le rendu sur un petit écran :

images/C04-005.png

Voici les propriétés utilisées pour la classe .row :

.row { 
  max-width: 62.5rem; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-flow: row wrap; 
  -ms-flex-flow: row wrap; 
  flex-flow: row wrap; 
  margin-left: auto; 
  margin-right: auto 
}

Nous avons bien l’utilisation des propriétés du module Flexible Box Layout ...