Grid Foreground
De Mi caja de notas
Créez rapidement et facilement de puissantes configurations multi-périphériques avec la grille Foundation imbriquée à 12 colonnes. Si vous connaissez les systèmes de grille, vous vous sentirez comme chez vous. Sinon, vous apprendrez rapidement.
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>
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>
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>
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>
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>
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>