Système de grille Foundation
Le système de grille Foundation comporte 12 colonnes.
Si vous n'avez pas besoin de 12 colonnes, vous pouvez fusionner certaines colonnes pour créer des colonnes de plus grande largeur.
Le système de grille de Foundation est réactif. Les colonnes se redimensionnent automatiquement en fonction de la taille de l'écran. Sur les grands écrans, il peut s'agir de trois colonnes ; sur les petits écrans, il peut s'agir de trois colonnes individuelles disposées dans l'ordre.
colonnes de grille
Le système de grille Foundation comporte trois types de colonnes :
.small(mobile).medium(Appareil tablette).large(Appareils informatiques : ordinateur portable, ordinateur de bureau)
Les classes ci-dessus peuvent être combinées pour créer des mises en page plus flexibles.
Structure de grille de base
Voici un exemple de structure de grille Foundation de base :
Exemple
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
<div class="small|medium|large-num columns"></div>
</div>
<div class="row">
...
</div>
Tout d'abord, créez une ligne (<div
class="row">). Il s'agit d'une colonne verticale horizontale. Ajoutez ensuite des instructions pour le nombre de colonnes.small-num, medium-numetlarge-numclass. Remarque : le nombre de colonnes
numdoit totaliser 12 :
Exemple
<div class="small-12 columns">.small-12 yellow</div>
</div>
<div class="row">
<div class="small-8 columns">.small-8 beige</div>
<div class="small-4 columns">.small-4 gray</div>
</div>
<div class="row">
<div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
<div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>
Essayez-le vous-même »
Dans l'exemple, la classe <div> de la première ligne est.small-12, cela crée 12 colonnes (largeur 100%).
La deuxième ligne crée deux colonnes,.small-4avec une largeur de 33.3%,.small-8avec une largeur de 66.6%.
Dans la troisième ligne, nous avons ajouté deux colonnes supplémentaires (.large-3et.large-9). Cela signifie que sur les écrans de grande taille, les colonnes deviennent 25% (.large-3) et 75% (.large-9) ratio. En même temps, nous avons également spécifié le ratio des colonnes sur les petits écrans à 33% (.small-4) et 66% (.small-8). Cette approche combinée est très utile pour la façon dont le contenu s'affiche sur différents écrans.
options de grille
Le tableau suivant résume les spécifications du système de grille Foundation sur plusieurs appareils :
| appareils de petite taille Téléphones (<40.0625em (640px)) |
appareils de taille moyenne Tablettes (>=40.0625em (640px)) |
appareils de grande taille Ordinateurs portables et de bureau (>=64.0625em (1025px)) |
|
|---|---|---|---|
| comportement de la grille | Toujours horizontal | Commence replié, horizontal au-dessus du point de rupture | Commence replié, horizontal au-dessus du point de rupture |
| préfixe de classe | .small-* | .medium-* | .large-* |
| nombre de classes | 12 | 12 | 12 |
| imbriquable | Oui | Oui | Oui |
| offset | Oui | Oui | Oui |
| ordre des colonnes | Oui | Oui | Oui |
Écran large
grid max(.row) La largeur est de 62.5rem. Sur les écrans larges, lorsque la largeur est supérieure à 62.5rem, les colonnes ne s'étendront pas sur toute la largeur de la page, même si la largeur est définie à 100%. Mais vous pouvez réinitialiser max-width via CSS :
Si vous utilisez la max-width par défaut, mais que vous voulez que la couleur d'arrière-plan s'étende sur toute la largeur de la page, vous pouvez utiliser.rowpour envelopper l'ensemble du conteneur et spécifier 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 »