Exemples de grille Foundation
Ci-dessous, nous avons rassemblé quelques exemples courants de grilles.
Trois colonnes égales
Cet exemple montre comment créer trois colonnes égales (33.3%/33.3%/33.3%), affichant trois colonnes sur les appareils moyens et grands, et s'empilant automatiquement sur les petits appareils :
Exemple
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:pink;">
<p>.medium-4</p>
</div>
<div class="medium-4 columns" style="background-color:yellow;">
<p>.medium-4</p>
</div>
</div>
Essayez-le vous-même »
Trois colonnes inégales
Cet exemple montre comment créer trois colonnes inégales (25%/50%/25%), affichant trois colonnes sur les appareils moyens et grands, et s'empilant automatiquement sur les petits appareils :
Exemple
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-3</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>.medium-6</p>
</div>
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-3</p>
</div>
</div>
Essayez-le vous-même »
Deux colonnes égales
Cet exemple montre comment créer deux colonnes égales (50%/50%), où le ratio des colonnes est toujours de 50%/50% sur les appareils de petite, moyenne et grande taille :
Exemple
<div class="small-6 columns" style="background-color:yellow;">
<p>.small-6</p>
</div>
<div class="small-6 columns" style="background-color:pink;">
<p>.small-6</p>
</div>
</div>
Essayez-le vous-même »
Deux colonnes inégales
Cet exemple montre comment créer deux colonnes inégales (33.3%/66.6%), où le ratio des colonnes est toujours de 33.3%/66.6% sur les appareils de petite, moyenne et grande taille :
Exemple
<div class="small-8 columns" style="background-color:yellow;">
<p>.small-8</p>
</div>
<div class="small-4 columns" style="background-color:pink;">
<p>.small-4</p>
</div>
</div>
Essayez-le vous-même »
Modifier l'ordre des colonnes
en utilisant.small|medium|large-push-*et.small|medium|large-pull-*Classes pour modifier l'ordre des colonnes :
Exemple
<div class="small-4 small-8-push columns" style="background-color:yellow;">
<p>.small-4 .small-8-push</p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;">
<p>.small-8 .small-4-pull</p>
</div>
</div>
Essayez-le vous-même »
Colonnes imbriquées
Vous pouvez utiliser des grilles imbriquées (des colonnes dans des colonnes) :
Exemple
<div class="small-8 columns">.small-8
<div class="row">
<div class="small-8 columns">.small-8 Imbriqué
<div class="row">
<div class="small-8 columns">.small-8 Imbriqué à nouveau</div>
<div class="small-4 columns">.small-4</div>
</div>
</div>
<div class="small-4 columns">.small-4</div>
</div>
</div>
<div class="small-4 columns">.small-4</div>
</div>
Essayez-le vous-même »
Mixte : mobile, appareils de bureau
Le système de grille Foundation comporte trois colonnes :.small-*(téléphone),.medium-*(Tablette), et.large-*(appareils de bureau). Ces classes peuvent être combinées dynamiquement pour rendre la mise en page plus flexible :
Astuce :Chaque classe peut être étendue. Si vous souhaitez que la largeur soit identique sur les appareils à petit et grand écran, vous pouvez définir la classe spécifiée.small-*。
Exemple
<div class="small-6 large-8 columns">.small-6 .large-8</div>
<div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
<div class="small-2 large-4 columns">.small-2 .large-2</div>
<div class="small-4 large-4 columns">.small-4 .large-2</div>
<div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
<div class="small-3 large-5 columns">.small-3 .large-5</div>
<div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>
Essayez-le vous-même »
Mixte : appareils mobiles, tablettes et ordinateurs de bureau
Exemple
<div class="medium-6 large-8 columns">.medium-6 .large-8</div>
<div class="medium-6 large-4 columns">.medium-6 .large-4</div>
</div>
<div class="row">
<div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div>
<div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div>
<div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div>
</div>
Essayez-le vous-même »
Colonnes centrées
Le centrage des colonnes peut être utilisé.small-centeredclasse. Les appareils de taille moyenne et grande peuvent hériter du centrage des petits appareils, mais vous devez définir la classe de centrage sur les grands appareils..large-centered 。
Exemple
<div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">
<div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
<div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
<div class="small-10 small-centered columns">small-10 small-centered</div>
</div>
Essayez-le vous-même »
Décalage de colonne
Vous pouvez utiliser.large-offset-*(ou.small-offset-*) la classe déplace la colonne vers la droite. Le nombre de colonnes pour la marge gauche est contrôlé par le signe * :
Exemple
<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, décalage 1</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-9 large-offset-2 columns">9, décalage 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>
Essayez-le vous-même »
Colonnes incomplètes
Si le nombre total de colonnes dans une rangée n'est pas 12, Foundation fera automatiquement flotter la dernière colonne à droite et utilisera l'espace vide pour remplir les colonnes restantes.
Optional.endLa classe est utilisée pour faire flotter l'élément dans la dernière colonne à gauche :
Exemple
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns">.medium-3</div>
<div class="medium-3 columns end">.medium-3 .end</div>
</div>
Écran large
Grille (.row) La taille maximale (max-width) est de 62.5rem. Sur les appareils à écran large, la taille peut être supérieure à 62.5rem, donc les colonnes ne peuvent pas remplir entièrement la page, même si la largeur est définie à 100%. Mais nous pouvons définir une nouvelle max-width via CSS :
Si vous voulez utiliser la propriété max-width par défaut, mais que la couleur d'arrière-plan doit s'étendre sur toute la page, alors vous l'utilisez sur l'élément conteneur.rowClasses, et spécifiez la couleur d'arrière-plan dont vous avez besoin :
Exemple
<div class="row">
<div class="small-6 columns" style="background-color:yellow;">.small-6</div>
<div class="small-6 columns" style="background-color:pink;">.small-6</div>
</div>
</div>
Essayez-le vous-même »