Fondazione - The Grid

Descrizione

Il sistema a griglia di fondazione scala fino a 12 colonne nella pagina. I sistemi a griglia vengono utilizzati per creare layout di pagina attraverso una serie di righe e colonne che ospitano il contenuto.

Opzioni griglia

La tabella seguente spiega brevemente come funziona il sistema a griglia Foundation in più dispositivi.

	Telefoni per piccoli dispositivi (<640 px)	Tablet dispositivi medi (> = 640px)	Dispositivi di grandi dimensioni Laptop e desktop (> = 1200 px)
Comportamento della griglia	Orizzontale in ogni momento	Compresso all'inizio, orizzontale sopra i punti di interruzione	Compresso all'inizio, orizzontale sopra i punti di interruzione
Prefisso di classe	.piccolo-*	.medio-*	.grande-*
Numero di colonne	12	12	12
Inseribile	sì	sì	sì
Offset	sì	sì	sì
Ordinamento delle colonne	sì	sì	sì

Struttura di base di una griglia di fondazione

Quella che segue è la struttura di base di una griglia di fondazione:

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

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

• Innanzitutto, crea una classe di riga per creare gruppi orizzontali di colonne.

• Il contenuto deve essere posizionato all'interno delle colonne e solo le colonne possono essere le figlie immediate delle righe.

• Le colonne della griglia vengono create specificando il numero di dodici colonne disponibili che si desidera estendere. Ad esempio, per quattro colonne uguali useremmo .large-3

Le seguenti sono le tre classi utilizzate nel sistema di griglie di fondazione:

Sr.No.	Classi e descrizione della griglia di base
1	Grande Le classi large- * vengono utilizzate per i dispositivi di grandi dimensioni.
2	medio La classe medium- * viene utilizzata per i dispositivi medi.
3	Piccolo small- * class viene utilizzata per i dispositivi piccoli.

Griglia avanzata

Di seguito sono riportati i formati griglia avanzati utilizzati in Foundation.

Sr.No.	Griglie e descrizione avanzate
1	Colonna / riga combinate Le classi di colonna e riga vengono utilizzate sullo stesso elemento per ottenere la colonna a larghezza intera da utilizzare come contenitore.
2	Nidificazione Possiamo annidare le colonne della griglia all'interno di altre colonne.
3	Offset Usando la classe large-offset- * o small-offset- * , puoi spostare le colonne a destra.
4	Righe incomplete La base sposta automaticamente l'ultimo elemento a destra quando le righe non includono colonne fino a 12.
5	Comprimi / apri righe Utilizzando le dimensioni della media query, le classi di compressione e di annullamento della compressione vengono incluse nell'elemento riga per mostrare i padding.
6	Colonne centrate Includendo la classe piccola centrata nella colonna, puoi rendere la colonna al centro.
7	Ordine di origine La classe di ordinamento della sorgente viene utilizzata per spostare le colonne tra i punti di interruzione.
8	Griglie a blocchi Block-grid viene utilizzato per dividere il contenuto.

Costruire semanticamente

Utilizzando il set di mixin SASS, viene generato un CSS griglia che viene utilizzato per costruire la propria griglia semantica. Per maggiori informazioni clicca qui

Riferimento SASS

Di seguito sono riportati i riferimenti SASS per la griglia utilizzata in Foundation.

Sr.No.	Griglie e descrizione di base
1	Variabili Usando le variabili sass possiamo modificare gli stili di default di questo componente.
2	Mixins L'output CSS finale viene creato utilizzando il mixin.