Grille de blocs Foundation
Les grilles de blocs sont utilisées pour diviser uniformément le contenu de la page : par exemple, pour afficher quatre images sur une même ligne, les largeurs doivent être divisées équitablement quelle que soit la taille de l'écran.
Vous pouvez utiliser<ul>ajouter à l'élément.small|medium|large-block-grid-numClasse pour créer des grilles de blocs.numUtilisé pour spécifier le nombre de divisions égales :
Exemple
<ul class="small-block-grid-3">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
</ul>
Essayez-le vous-même »
Un autre exemple, avec des paragraphes :
Exemple
<ul class="small-block-grid-3">
<li><p>Un simple exemple Texte...</p></li>
<li><p>Un simple exemple de texte...</p></li>
<li><p>Un simple exemple de texte...</p></li>
</ul>
<li><p>Un simple exemple Texte...</p></li>
<li><p>Un simple exemple de texte...</p></li>
<li><p>Un simple exemple de texte...</p></li>
</ul>
Essayez-le vous-même »
Les différentes tailles d'écran affichent des quantités différentes.
En ajoutant plusieurs classes de blocs de grille, vous pouvez définir différents nombres de blocs à afficher selon les différentes tailles d'écran.
Exemple
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
<li><img src="newyork.jpg" alt="New York"></li>
<li><img src="paris.jpg" alt="Paris"></li>
<li><img src="sanfran.jpg" alt="San Francisco"></li>
<li><img src="newyork.jpg" alt="New York"></li>
</ul>
Essayez-le vous-même »