Contenitore Reticolo CSS

1
2
3
4
5
6
7
8

Prova Personalmente

Contenitore di griglia

Per fare in modo che l'elemento HTML agisca come contenitore di griglia, è necessario impostare display L'attributo viene impostato su grid o inline-grid.

Il contenitore della griglia è composto da elementi di griglia posizionati all'interno delle colonne e delle righe.

Proprietà grid-template-columns

grid-template-columns Questa proprietà definisce il numero di colonne nella disposizione della griglia e può definire la larghezza di ogni colonna.

Il valore è una lista separata da spazi, in cui ogni valore definisce la lunghezza della corrispondente colonna.

Se si desidera che la disposizione della griglia contenga 4 colonne, specificare la larghezza di queste 4 colonne; se tutte le colonne devono avere la stessa larghezza, impostare su "auto".

Esempio

Genera una griglia che contiene 4 colonne:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

Prova Personalmente

Attenzione:Se ci sono 4 o più elementi nella griglia di 4 colonne, la griglia aggiunge automaticamente nuove righe e inserisce questi elementi al loro interno.

grid-template-columns Questa proprietà può anche essere utilizzata per specificare la dimensione delle colonne (larghezza).

Esempio

Impostare le dimensioni di questi 4 colonne:

.grid-container {
  display: grid;
  grid-template-columns: 80px 200px auto 40px;
}

Prova Personalmente

Proprietà grid-template-rows

grid-template-rows Questa proprietà definisce l'altezza di ogni colonna.

1
2
3
4
5
6
7
8

Il valore è una lista separata da spazi, in cui ogni valore definisce l'altezza della corrispondente riga:

Esempio

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

Prova Personalmente

Proprietà justify-content

justify-content Questa proprietà viene utilizzata per allineare l'intera griglia all'interno del contenitore.

1
2
3
4
5
6
7
8

Attenzione:L'ampiezza totale della griglia deve essere inferiore all'ampiezza del contenitore, in modo che la proprietà justify-content funzioni correttamente.

Esempio

.grid-container {
  display: grid;
  justify-content: spazio-evenly;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  justify-content: spazio-around;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  justify-content: spazio-between;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  justify-content: centro;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  justify-content: inizio;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  justify-content: fine;
}

Prova Personalmente

Proprietà allineamento del contenuto

allineamento del contenuto L'attributo viene utilizzato per allineare verticalmente l'intera griglia all'interno del contenitore.

1
2
3
4
5
6
7
8

Attenzione:L'altezza totale della griglia deve essere inferiore all'altezza del contenitore, in modo che l'attributo align-content funzioni correttamente.

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: center;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: space-evenly;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: space-around;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: space-between;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: start;
}

Prova Personalmente

Esempio

.grid-container {
  display: grid;
  altezza: 400px;
  align-content: end;
}

Prova Personalmente