Kontener siatki CSS

1
2
3
4
5
6
7
8

Spróbuj sam

Kontener siatki

Aby element HTML działał jako kontener siatki, musisz ustawić display Właściwość ta ustawiona na grid lub inline-grid.

Kontener siatki składa się z elementów umieszczonych w kolumnach i wierszach.

Właściwość grid-template-columns

grid-template-columns Właściwość ta definiuje liczbę kolumn w układzie siatki oraz może określać szerokość każdej kolumny.

Wartość ta jest listą rozdzieloną spacjami, gdzie każda wartość definiuje długość odpowiedniej kolumny.

Jeśli chcesz, aby układ siatki zawierał cztery kolumny, określ szerokość tych czterech kolumn; jeśli wszystkie kolumny powinny mieć tę samą szerokość, ustaw na "auto".

Przykład

Generuje siatkę zawierającą cztery kolumny:

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

Spróbuj sam

Uwaga:Jeśli w siatce 4 kolumn jest więcej niż 4 elementów, siatka automatycznie doda nowe wiersze i umieści te elementy w nich.

grid-template-columns Właściwość ta może również być używana do określenia rozmiaru kolumn (szerokości).

Przykład

Ustaw rozmiar tych 4 kolumn:

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

Spróbuj sam

Właściwość grid-template-rows

grid-template-rows Właściwość ta definiuje wysokość każdej kolumny.

1
2
3
4
5
6
7
8

Wartość ta jest listą rozdzieloną spacjami, gdzie każda wartość definiuje wysokość odpowiedniego wiersza:

Przykład

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

Spróbuj sam

Właściwość ustawienie zawartości

ustawienie zawartości Właściwość ta używana jest do wyważenia całej siatki w kontenerze.

1
2
3
4
5
6
7
8

Uwaga:Całkowita szerokość siatki musi być mniejsza niż szerokość kontenera, aby właściwość ustawienie zawartości działała poprawnie.

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: równomiernie;
}

Spróbuj sam

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: wokół elementów;
}

Spróbuj sam

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: między elementami;
}

Spróbuj sam

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: środek;
}

Spróbuj sam

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: początek;
}

Spróbuj sam

Przykład

.grid-container {
  display: grid;
  ustawienie zawartości: koniec;
}

Spróbuj sam

Właściwość ustawienie zawartości

ustawienie zawartości Właściwość służy do wertykalnego wyśrodkowania całej siatki wewnątrz kontenera.

1
2
3
4
5
6
7
8

Uwaga:Cała siatka musi mieć wyższą wysokość niż kontener, aby właściwość align-content działała poprawnie.

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam

Przykład

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

Spróbuj sam