Grid Foreground

Français - English

Classes HTML prédéfinies

Ce sont des exemples de différentes manières d'utiliser la grille de Foundation. Foundation utilise box-sizing: border-box pour que les bordures et le remplissage n'affectent pas la largeur globale des colonnes, rendant les calculs simples. Puisque Foundation est d'abord mobile, nous allons empiler le contenu par défaut. Vous avez accès à un petit réseau entièrement séparé pour utiliser le point d'arrêt de 768px. Cela signifie que vous pouvez créer des mises en page assez complexes et même supprimer des colonnes si vous le souhaitez.

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>
<div class="row">
  <div class="large-3 columns">...</div>
  <div class="large-6 columns">...</div>
  <div class="large-3 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-2 columns">...</div>
  <div class="small-6 large-8 columns">...</div>
  <div class="small-12 large-2 columns">...</div>
</div>
<div class="row">
  <div class="small-3 columns">...</div>
  <div class="small-9 columns">...</div>
</div>
<div class="row">
  <div class="large-4 columns">...</div>
  <div class="large-8 columns">...</div>
</div>
<div class="row">
  <div class="small-6 large-5 columns">...</div>
  <div class="small-6 large-7 columns">...</div>
</div>
<div class="row">
  <div class="large-6 columns">...</div>
  <div class="large-6 columns">...</div>
</div>

24

4

64

full3

full6

full3

62

68

full2

3

9

full4

full8

65

67

full6

full6

---

Imbriqué infiniment

La grille permet d'imbriquer autant que vous le souhaitez, bien qu'à un certain moment elle devienne absurde. Vous pouvez utiliser cette imbrication pour créer des mises en page assez complexes, ainsi que d'autres astuces telles que des présentations de formulaire ou d'éléments visuels.

<div class="row">
  <div class="small-8 columns">8
    <div class="row">
      <div class="small-8 columns">8 Imbriqué
        <div class="row">
          <div class="small-8 columns">8 Imbriqué à nouveau</div>
          <div class="small-4 columns">4</div>
        </div>
      </div>
      <div class="small-4 columns">4</div>
    </div>
  </div>
  <div class="small-4 columns">4</div>
</div>

8

8 Imbriqué

8 Imbriqué à nouveau

4

4

4

---

Décalages

Les décalages vous permettent de créer un espace supplémentaire entre les colonnes d'une rangée. Comme le reste de la grille, ils sont emboîtables. Vous pouvez utiliser des classes comme .large-offset-1 et small-offset-3 pour manipuler vos positions de colonne de différentes manières. Vous pouvez compenser jusqu'à 11 car vous ne compenseriez jamais une colonne pleine largeur.

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>

1

11

1

10, offset 1

1

9, offset 2

1

8, offset 3

---

Colonnes Centrées

Les colonnes centrées sont placées au milieu de la ligne. Cela ne centre pas leur contenu, mais centre l'élément de grille lui-même. Ceci est accompli en ajoutant une classe de large-centered ou small-centered en fonction du point d'arrêt sur lequel les colonnes doivent être centrées. Les petites versions porteront sur tous les points d'arrêt si elles ne sont pas remplacées par une grande version. Vous pouvez centrer n'importe quel nombre de colonnes. Pour qu'une colonne ne soit pas trop petite, ajoutez une classe de large-uncentered.

<div class="row">
  <div class="small-3 small-centered columns">3 centré</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">6 centré</div>
</div>
<div class="row">
  <div class="small-9 small-centered large-uncentered columns">9 centré</div>
</div>
<div class="row">
  <div class="small-11 small-centered columns">11 centré</div>
</div>

3 centré

6 centré, large

9 centré petit

11 centré

---

Classement par source

En utilisant ces classes de classement par source, vous pouvez déplacer des colonnes entre nos points d'arrêt. Cela signifie que vous pouvez avoir un sous-menu de navigation sur la gauche sur grands écrans, mais allez ci-dessous pour les petits. push-# est la syntaxe que vous utiliserez.

<div class="row">
  <div class="small-2 push-10 columns">2</div>
  <div class="small-10 pull-2 columns">10, dernier</div>
</div>
<div class="row">
  <div class="small-3 push-9 columns">3</div>
  <div class="small-9 pull-3 columns">9, dernier</div>
</div>
<div class="row">
  <div class="small-4 push-8 columns">4</div>
  <div class="small-8 pull-4 columns">8, dernier</div>
</div>
<div class="row">
  <div class="small-5 push-7 columns">5</div>
  <div class="small-7 pull-5 columns">5, dernier</div>
</div>
<div class="row">
  <div class="small-6 push-6 columns">6</div>
  <div class="small-6 pull-6 columns">6, dernier</div>
</div>

2

10, dernier

3

9, dernier

4

8, dernier

5

5, dernier

6

6, dernier

---

Petite grille

Comme vous l'avez probablement remarqué dans les exemples ci-dessus, vous avez accès à une petite et grande grille. Si vous savez que la structure de votre grille sera la même pour les petits appareils que pour les gros appareils, utilisez simplement la petite grille.

<div class="row">
  <div class="small-2 columns">2</div>
  <div class="small-10 columns">10, dernier</div>
</div>
<div class="row">
  <div class="small-3 columns">3</div>
  <div class="small-9 columns">9, dernier</div>
</div>

2

10, dernier

3

9, dernier