Block Grid/fr

English

Les grilles de blocs vous permettent de répartir uniformément le contenu d'une liste dans la grille. Si vous souhaitez créer une rangée de 5 images ou de paragraphes qui doivent rester régulièrement espacés, quelle que soit la taille de l'écran, la grille de blocs est pour vous.

Construire avec des classes HTML prédéfinies

Les grilles de blocs sont constituées d'un ul.small-block-grid-# ou d'un ul.large-block-grid-#. Celles-ci sont idéales pour le contenu bloqué généré par une application, car elles ne nécessitent pas l'affichage de lignes ou de nombres d'éléments.

Celles-ci ont un peu de flexibilité puisque vous avez accès à deux grilles distinctes entre notre point d'arrêt construit de 768px. Si vous utilisez uniquement le small-block-grid, la grille conservera son espacement et sa configuration, quelle que soit la taille de l'écran. Si vous utilisez uniquement big-block-grid, les éléments de la liste seront empilés les uns sur les autres pour les petits périphériques. Si vous utilisez ces deux classes combinées, vous pouvez contrôler la configuration et la disposition séparément pour chaque point d'arrêt.

Utiliser uniquement la classe small-block-grid

<!-- Utiliser uniquement la classe small-block-grid -->
<ul class="small-block-grid-2">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

• 
• 
• 
• 

Utiliser uniquement la classe large-block-grid

<!-- Utiliser uniquement la classe large-block-grid -->
<ul class="large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

• 
• 
• 
• 

Utiliser les deux classes de blocs ensemble pour différentes dispositions

<!-- Utiliser les deux classes de blocs ensemble pour différentes dispositions -->
<ul class="small-block-grid-2 large-block-grid-4">
  <li><img src="../img/demos/demo1.png"></li>
  <li><img src="../img/demos/demo2.png"></li>
  <li><img src="../img/demos/demo3.png"></li>
  <li><img src="../img/demos/demo4.png"></li>
</ul>

• 
• 
• 
• 

Pour que ces styles prennent effet, assurez-vous que vous avez le package Foundation CSS par défaut ou que vous avez sélectionné la grille de blocs d'un package personnalisé . Celles-ci doivent être liées en suivant notre structure de page HTML par défaut.