CSS
Griglia
Ricerca…
introduzione
Il layout a griglia è un nuovo e potente sistema di layout CSS che consente di dividere un contenuto di una pagina Web in righe e colonne in modo semplice.
Osservazioni
Il modulo Livello di griglia CSS Livello 1 è, a partire dal 9 settembre 2016, una Raccomandazione del Candidato W3C. È considerato in fase di test ( https://www.w3.org/Style/CSS/current-work) .
A partire dal 3 luglio 2017, i browser Internet Explorer 10 e 11 di Microsoft e Edge supportano solo una versione precedente delle specifiche utilizzando un prefisso del fornitore.
Esempio di base
| Proprietà | Valori possibili |
|---|---|
| display | griglia / griglia in linea |
La griglia CSS è definita come proprietà di visualizzazione. Si applica solo a un elemento genitore e ai suoi figli immediati.
Considera il seguente markup:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
Il modo più semplice per definire la struttura di markup sopra come una griglia è semplicemente impostare la proprietà di display sulla grid :
.container {
display: grid;
}
Tuttavia, facendo ciò invariabilmente causerà il collasso di tutti gli elementi figlio uno sopra l'altro. Questo perché i bambini attualmente non sanno come posizionarsi all'interno della griglia. Ma possiamo dire esplicitamente a loro.
Per prima cosa dobbiamo dire all'elemento della griglia .container quante righe e colonne compongono la sua struttura e possiamo farlo usando le proprietà grid-columns e grid-rows (notare la pluralizzazione):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Tuttavia, questo ancora non ci aiuta molto perché dobbiamo dare un ordine a ciascun elemento figlio. Possiamo farlo specificando i valori della grid-row grid-column e della grid-column che indicano dove si trova nella griglia:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
Dando a ciascun articolo un valore di colonna e riga identifica l'ordine degli articoli all'interno del contenitore.
Visualizza un esempio funzionante su JSFiddle . Dovrai visualizzarlo in IE10, IE11 o Edge perché funzioni come sono attualmente gli unici browser che supportano il Grid Layout (con il prefisso del fornitore -ms- ) o abilitano un flag in Chrome, Opera e Firefox in base a caniuse in ordine per testare con loro.