Sommaire

Imbriquer des grilles

Foundation nous permet de créer des grilles de mise en page complexes en imbriquant une grille dans une autre grille. Dans une ligne, à la place d’un bloc, vous pouvez inclure une autre ligne qui contiendra des blocs.

Voici la grille de cet exemple :

images/C03-010.png

Nous n’avons qu’une seule ligne (.row). Elle comporte un premier bloc aligné sur huit colonnes (.small-8) et un deuxième sur quatre colonnes (.small-4).

Le premier bloc contient du texte (<p>) et inclut une ligne (.row) qui utilisera elle aussi un système de douze colonnes.

Dans cette ligne, nous avons un bloc sur huit colonnes et un autre sur quatre colonnes.

Le premier bloc contient un paragraphe de texte et à nouveau une ligne avec deux blocs alignés sur six colonnes. Le deuxième bloc contient un paragraphe.

Voici le code HTML utilisé :

<div class="row"> 
  <div class="small-8 columns jaune"> 
     <p>Bloc 1-1 sur 8 colonnes</p> 
     <div class="row"> 
        <div class="small-8 columns vert"> 
           <p>Bloc inclus 2-1 sur 8 colonnes</p> 
           <div class="row"> 
              <div class="small-6 columns rose"> 
                 <p>Bloc inclus 3-1 sur 6 colonnes</p> 
   ...