Introduzione al modulo layout griglia CSS

Era una volta tavoli, poi margini e galleggianti, poi FlexBox e adesso griglia: I CSS si sono sempre orientati verso modi nuovi e migliori per alleviare il vecchio lavoro di codifica layout web. Il Modello di layout griglia CSS può creare e aggiornare il layout lungo due assi: orizzontale e verticale, influenzando sia la larghezza che l'altezza di elementi.

Il layout della griglia non dipende dalla posizione degli elementi nel markup, quindi è possibile mischia i posizionamenti di elementi nel markup senza alterare il layout. Nel modello di griglia, è un elemento contenitore di griglia diviso in colonne e righe della griglia (collettivamente noto come tracce di griglia) di linee della griglia. Ora vediamo come creare una griglia di esempio.

Supporto per il browser

Al momento di scrivere questo articolo, il modulo griglia CSS è supportato solo dal browser IE più recente e da Edge. La griglia CSS è in fase sperimentale negli altri principali browser in cui è necessario abilitare il supporto manualmente:

• Firefox: Premi MAIUSC + F2, inserisci il seguente comando nella barra di input GCLI visualizzata nella parte inferiore del browser: pref set layout.css.grid.enabled true.
• Cromo: Sfoglia il chrome: // flags URL e abilitazione Funzionalità di piattaforma Web sperimentale.

È probabile che tutti i principali supporti del browser arrivo entro l'inizio / metà del 2017.

Una griglia di esempio

A trasforma un elemento in un contenitore della griglia Puoi usare uno di questi tre display proprietà:

1. display: grid; - l'elemento è convertito in un contenitore della griglia del blocco
2. display: griglia in linea; - l'elemento è convertito in un contenitore di griglia in linea
3. display: subgrid; - se l'elemento è un oggetto griglia è convertito in una subgrid che ignora le proprietà del modello di griglia e della griglia

Proprio come una tabella è composta da più celle di una tabella, una griglia è composto da più celle di griglia. Un elemento della griglia è assegnato a un insieme di celle della griglia che è collettivamente noto come il area della griglia.

Creeremo una griglia con cinque sezioni (aree della griglia): in alto, in basso, a sinistra, a destra e al centro. L'HTML è composto da cinque div all'interno di un contenitore div.

 
 
Superiore
 
Sinistra
 
centro
 
Destra
 
Parte inferiore
 
 

Nel CSS, il Grid-template-aree proprietà definisce una griglia con diverse aree della griglia. Nel suo valore, una stringa rappresenta una riga della griglia e ogni nome valido all'interno di una stringa rappresenta una colonna. A crea una cella di griglia vuota devi usare il punto (.) personaggio all'interno di una stringa di riga.

Il nomi delle aree della griglia devono essere referenziati dal grid-zona proprietà dei singoli elementi della griglia.

 .grid-container width: 500px; altezza: 500px; display: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom";  .grid-top grid-area: top;  .grid-bottom grid-area: bottom;  .grid-left grid-area: left;  .grid-right grid-area: right;  .grid-center grid-area: center;  

Quindi questo codice crea una griglia con tre righe e colonne. Il superiore l'oggetto occupa un'area che si estende oltre tre colonne nella prima riga e il parte inferiore l'oggetto si estende tre colonne nell'ultima riga. Ognuno di sinistra, centro e destra oggetti prende una colonna nella fila centrale.

Ora dobbiamo assegna le dimensioni a queste righe e colonne. Il grid-template-colonne e grid-template-righe proprietà definire la dimensione della traccia della griglia (riga o colonna).

 .grid-container width: 500px; altezza: 500px; display: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px;  

Ecco come appare la nostra griglia CSS ora (con alcuni stili aggiuntivi):

Spazio tra gli elementi della griglia

Puoi aggiungere spazio vuoto tra colonne e righe utilizzando grid-column-gap e grid-fila-gap, o la loro proprietà a lungo termine grid-gap.

 .grid-container width: 500px; altezza: 500px; display: grid; grid-template-areas: "top top top" "left center right" "bottom bottom bottom"; grid-template-columns: 100px auto 100px; grid-template-rows: 50px auto 150px; intercapedine: 5px 5px;  

Qui sotto puoi vedere che il grid-gap la proprietà ha aggiunto spazi vuoti tra gli elementi della griglia.

Allinea il contenuto e gli elementi della griglia

Il justify-contenuti proprietà del contenitore della griglia (.grid-contenitore) allinea il contenuto della griglia lungo l'asse in linea (asse orizzontale) e la proprietà allineare-contenuti, allinea il contenuto di una griglia lungo l'asse del blocco (asse verticale). Entrambe le proprietà può avere uno di questi valori: inizio, fine, centro, spazio tra, spazio-around e spazio in modo uniforme.

Dove applicabile, la dimensione della traccia (riga o colonna) si restringe per adattarsi al contenuto quando allineato. Dai un'occhiata agli screenshot dei contenuti della griglia allineato con valori diversi sotto.

justify-content: start;

justify-content: end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

allinea-contenuto: inizio;

allinea-contenuto: fine;

allinea-contenuto: centro;

allinea-contenuto: spazio-tra;

allinea-contenuto: spazio-intorno;

allinea-contenuto: spazio-equamente;

Entrambi i justify-contenuti e allineare-contenuti proprietà allineare l'intero contenuto all'interno di una griglia.

A allineare i singoli oggetti all'interno delle loro aree di griglia, utilizzare il altra coppia di proprietà di allineamento: justify-articoli e allineare-articoli. Entrambi possono avere uno di questi valori: inizio, fine, centro, linea di base (allinea gli elementi lungo la linea della griglia di base dell'area) e allungare (gli oggetti riempiono l'intera area).