Modulo di layout a griglia CSS

Header
Menu
Main
Right
Footer

Prova tu stesso

Layout di griglia

Il modulo di layout a griglia CSS (CSS Grid Layout Module) fornisce un sistema di layout basato su griglia con righe e colonne, che rende la progettazione delle pagine web più facile senza dover utilizzare il float e la posizionamento.

Supporto del browser

Tutti i browser moderni supportano le proprietà di griglia.

57.0 16.0 52.0 10 44

Elementi di griglia

La layout di griglia è composta da un elemento genitore e uno o più elementi figli.

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

Prova tu stesso

Proprietà di visualizzazione

quando il属性的 HTML elemento display la proprietà viene impostata su grid o inline-grid in questo caso diventa contenitore di griglia.

Esempio

.grid-container {
  display: grid;
}

Prova tu stesso

Esempio

.grid-container {
  display: inline-grid;
}

Prova tu stesso

Tutti i figli diretti del contenitore di griglia diventano automaticamente elementi di griglia.

Colonne di griglia (Grid Columns)

La linea verticale degli elementi di griglia è chiamata colonna.

Righe di griglia (Grid Rows)

La linea orizzontale degli elementi di griglia è chiamata riga.

Spazi di griglia (Grid Gaps)

Lo spazio tra ogni colonna/riga è chiamato spazio.

Puoi regolare la dimensione dello spazio utilizzando una delle seguenti proprietà:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Esempio

grid-column-gap La proprietà imposta lo spazio tra le colonne:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Prova tu stesso

Esempio

grid-row-gap La proprietà imposta lo spazio tra le righe:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Prova tu stesso

Esempio

grid-gap Questa proprietà è un abbreviazione delle proprietà grid-row-gap e grid-column-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Prova tu stesso

Esempio

grid-gap Le proprietà possono anche essere utilizzate per impostare un valore per lo spazio tra righe e colonne:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Prova tu stesso

Linee di griglia (Grid Lines)

Le linee tra le colonne si chiamano linee di colonna (column lines).

Le linee tra le righe si chiamano linee di riga (row lines).

Quando metti l'elemento griglia nel contenitore griglia, cita il numero di riga:

Esempio

Metti l'elemento griglia sulla linea di colonna 1 e termina su quella di colonna 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Prova tu stesso

Esempio

Metti l'elemento griglia sulla linea di riga 1 e termina su quella di riga 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Prova tu stesso