Fondation - The Grid

La description

Le système de grille de fondation met à l'échelle jusqu'à 12 colonnes sur la page. Les systèmes de grille sont utilisés pour créer des mises en page via une série de lignes et de colonnes qui hébergent votre contenu.

Options de grille

Le tableau suivant explique brièvement comment le système de grille Foundation fonctionne sur plusieurs appareils.

	Petits appareils Téléphones (<640px)	Appareils moyens Tablettes (> = 640px)	Ordinateurs portables et ordinateurs de bureau de grande taille (> = 1200 px)
Comportement de la grille	Horizontal à tout moment	Réduit au début, horizontal au-dessus des points d'arrêt	Réduit au début, horizontal au-dessus des points d'arrêt
Préfixe de classe	.petit-*	.moyen-*	.grand-*
Le nombre de colonnes	12	12	12
Emboîtable	Oui	Oui	Oui
Décalages	Oui	Oui	Oui
Ordre des colonnes	Oui	Oui	Oui

Structure de base d'une grille de fondation

Voici la structure de base d'une grille de fondation -

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

• Commencez par créer une classe de lignes pour créer des groupes horizontaux de colonnes.

• Le contenu doit être placé dans les colonnes et seules les colonnes peuvent être les enfants immédiats des lignes.

• Les colonnes de la grille sont créées en spécifiant le nombre de douze colonnes disponibles que vous souhaitez couvrir. Par exemple, pour quatre colonnes égales, nous utiliserions .large-3

Voici les trois classes utilisées dans le système de grille Foundation -

N ° Sr.	Classes de base de la grille et description
1	Grand Les grandes classes * sont utilisées pour les gros périphériques.
2	Moyen La classe moyenne- * est utilisée pour les périphériques moyens.
3	Petit small- * class est utilisé pour les petits appareils.

Grille avancée

Voici les formats de grille avancés utilisés dans Foundation.

N ° Sr.	Grilles avancées et description
1	Combined Column/Row The column and row classes are used on the same element to get the full width column to use as a container.
2	Nesting We can nest the grid columns inside another columns.
3	Offsets Using large-offset-* or small-offset-* class, you can move the columns to the right.
4	Incomplete Rows Foundation floats the last element automatically to the right when the rows do not include columns up to 12.
5	Collapse/Uncollapse Rows Using the media query size, the collapse and uncollapse classes are included to the row element to show the paddings.
6	Centered Columns By including the class small-centered in the column, you can make the column at the center.
7	Source Ordering Source ordering class is used to shift the columns between the breakpoint.
8	Block Grids Block-grid is used to split the content.

Building Semantically

Using the set of SASS mixins, a grid CSS is generated which is used to build your own semantic grid. For more information click here

SASS Reference

The following are the SASS reference for grid used in Foundation.

Sr.No.	Basic Grids & Description
1	Variables Using the sass variables we can modify the default styles of this component.
2	Mixins The final CSS output is build using the mixin.