Modulo layout griglia CSS
Intestazione
Menù
Principale
Destra
Piè di pagina
Layout della griglia
Il CSS Grid Layout Module offre un sistema di layout basato su griglia, con righe e colonne, che semplifica la progettazione di pagine Web senza dover utilizzare float e posizionamento.
Supporto browser
Le proprietà della griglia sono supportate in tutti i browser moderni.
| 57.0 | 16.0 | 52.0 | 10 | 44 |
Elementi della griglia
Un layout griglia è costituito da un elemento padre, con uno o più elementi figlio.
Esempio
<div
class="grid-container">
<div class="grid-item">1</div>
<div
class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div
class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div
class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9
Mostra proprietà
Un elemento HTML diventa un contenitore di griglia quando la sua displayproprietà è impostata su
grido inline-grid.
Esempio
.grid-container {
display: grid;
}
Esempio
.grid-container {
display: inline-grid;
}
Tutti gli elementi figlio diretti del contenitore della griglia diventano automaticamente elementi della griglia .
Colonne della griglia
Le righe verticali degli elementi della griglia sono chiamate colonne .
Righe della griglia
Le righe orizzontali degli elementi della griglia sono chiamate righe .
Lacune nella griglia
Gli spazi tra ogni colonna/riga sono chiamati spazi vuoti .
È possibile regolare la dimensione dello spazio vuoto utilizzando una delle seguenti proprietà:
grid-column-gapgrid-row-gapgrid-gap
Esempio
La grid-column-gapproprietà imposta lo spazio tra le colonne:
.grid-container {
display: grid;
grid-column-gap: 50px;
}
Esempio
La grid-row-gapproprietà imposta lo spazio tra le righe:
.grid-container {
display: grid;
grid-row-gap: 50px;
}
Esempio
La grid-gapproprietà è una proprietà abbreviata per la
grid-row-gape le
grid-column-gapproprietà:
.grid-container {
display: grid;
grid-gap: 50px 100px;
}
Esempio
La grid-gapproprietà può essere utilizzata anche per impostare sia lo spazio di riga che quello di colonna in un valore:
.grid-container {
display: grid;
grid-gap: 50px;
}
Linee della griglia
Le righe tra le colonne sono chiamate righe di colonna .
Le righe tra le righe sono chiamate righe di riga .
Fare riferimento ai numeri di riga quando si posiziona un elemento della griglia in un contenitore della griglia:
Esempio
Posiziona un elemento della griglia sulla riga di colonna 1 e lascia che termini sulla riga di colonna 3:
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
Esempio
Posiziona un elemento della griglia sulla riga 1 e lascia che finisca sulla riga 3:
.item1 {
grid-row-start: 1;
grid-row-end: 3;
}
Tutte le proprietà della griglia CSS
| Property | Description |
|---|---|
| column-gap | Specifies the gap between the columns |
| gap | A shorthand property for the row-gap and the column-gap properties |
| grid | A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties |
| grid-area | Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties |
| grid-auto-columns | Specifies a default column size |
| grid-auto-flow | Specifies how auto-placed items are inserted in the grid |
| grid-auto-rows | Specifies a default row size |
| grid-column | A shorthand property for the grid-column-start and the grid-column-end properties |
| grid-column-end | Specifies where to end the grid item |
| grid-column-gap | Specifies the size of the gap between columns |
| grid-column-start | Specifies where to start the grid item |
| grid-gap | A shorthand property for the grid-row-gap and grid-column-gap properties |
| grid-row | A shorthand property for the grid-row-start and the grid-row-end properties |
| grid-row-end | Specifies where to end the grid item |
| grid-row-gap | Specifies the size of the gap between rows |
| grid-row-start | Specifies where to start the grid item |
| grid-template | A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties |
| grid-template-areas | Specifies how to display columns and rows, using named grid items |
| grid-template-columns | Specifies the size of the columns, and how many columns in a grid layout |
| grid-template-rows | Specifies the size of the rows in a grid layout |
| row-gap | Specifies the gap between the grid rows |