Grille Foundation - Grands appareils

Dans le chapitre précédent, nous avons présenté des mises en page de grille pour les appareils moyens et petits, avec un rapport de 25%/75% sur les petits appareils (.small-3 et .small-9) et un rapport de 50%/50% sur les appareils moyens (.medium-6 et .medium-6) :

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

Sur les grands appareils, nous recommandons un rapport de 33%/66%.

Astuce :La taille d'écran pour les grands appareils est définie comme supérieure à 64.0625em.

Utilisé sur les grands appareils.large-*class.

Maintenant, nous ajoutons deux colonnes sur les grands appareils :

<div class="small-3 medium-6 large-4 columns">....</div>
<div class="small-9 medium-6 large-8 columns">....</div>

Analyse syntaxique

• Sur les petits appareils, le rapport des deux colonnes est de 25%/75% (.small-3et.small-9)
• Sur les appareils moyens, le rapport des deux colonnes est de 50%/50% (.medium-6et.medium-6)
• Sur les grands appareils, le rapport des deux colonnes est de 33%/66% (.large-4et.large-8)

	Remarque :Assurez-vous que les nombres totalisent 12 colonnes !

À utiliser uniquement sur les grands appareils

Dans l'exemple suivant, nous avons spécifié.large-6Classe (pas .medium-* et.small-*). Cela indique que sur les grands appareils, le rapport est de 50%/50%. Mais sur les appareils moyens ou petits, ils s'empileront horizontalement (largeur 100%) :