Sommaire

Les grilles incomplètes

1. Des blocs sur moins de douze colonnes

Il est possible de créer des grilles avec des lignes qui soient incomplètes, c’est-à-dire que la somme des blocs alignés ne soit pas sur douze colonnes. Vous pourriez par exemple créer une ligne comportant trois blocs alignés sur trois, quatre et trois colonnes ; soit un alignement total sur dix colonnes au lieu de douze. Vous avez alors "un trou" sur deux colonnes.

Voici le code HTML utilisé dans cet exemple :

<div class="row"> 
  <div class="large-3 columns jaune"> 
     <p>Bloc sur 3 colonnes</p> 
  </div> 
  <div class="large-4 columns bleu"> 
     <p>Bloc sur 4 colonnes</p> 
  </div> 
  <div class="large-3 columns vert"> 
     <p>Bloc sur 3 colonnes</p> 
  </div> 
</div>

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

À nouveau, pour plus de facilité d’affichage, des fonds colorés en CSS ont été ajoutés dans les blocs.

Voici l’affichage résultant :

images/C03-014.png

Foundation a automatiquement décalé le dernier bloc sur la fin de la ligne. Pour ce dernier bloc, voici le sélecteur CSS qui est appliqué :

.column:last-child:not(:first-child), 
.columns:last-child:not(:first-child) { 
  float: ...