Kontener siatki CSS
1
2
3
4
5
6
7
8
Pojemnik na siatkę
Aby element HTML zachowywał się jak kontener siatki, musisz ustawić displaywłaściwość na
gridlub inline-grid.
Kontenery siatki składają się z elementów siatki, umieszczonych w kolumnach i wierszach.
Właściwość grid-template-colums
Właściwość grid-template-columnsdefiniuje liczbę kolumn w układzie siatki i może określać szerokość każdej kolumny.
Wartość jest listą oddzieloną spacjami, gdzie każda wartość definiuje szerokość odpowiedniej kolumny.
Jeśli chcesz, aby układ siatki zawierał 4 kolumny, określ szerokość 4 kolumn lub „auto”, jeśli wszystkie kolumny powinny mieć tę samą szerokość.
Przykład
Utwórz siatkę z 4 kolumnami:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Uwaga: Jeśli masz więcej niż 4 elementy w siatce z 4 kolumnami, siatka automatycznie doda nowy wiersz, w którym zostaną umieszczone elementy.
Właściwość grid-template-columnsmoże również służyć do określenia rozmiaru (szerokości) kolumn.
Przykład
Ustaw rozmiar dla 4 kolumn:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Właściwość grid-template-rows
Właściwość grid-template-rowsokreśla wysokość każdego wiersza.
1
2
3
4
5
6
7
8
Wartość jest listą oddzieloną spacjami, gdzie każda wartość określa wysokość odpowiedniego wiersza:
Przykład
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Właściwość uzasadnienia treści
Właściwość justify-contentsłuży do wyrównania całej siatki wewnątrz kontenera.
1
2
3
4
5
6
Uwaga: Całkowita szerokość siatki musi być mniejsza niż szerokość kontenera, aby justify-contentwłaściwość miała jakikolwiek efekt.
Przykład
.grid-container {
display: grid;
justify-content: space-evenly;
}
Przykład
.grid-container {
display: grid;
justify-content: space-around;
}
Przykład
.grid-container {
display: grid;
justify-content: space-between;
}
Przykład
.grid-container {
display: grid;
justify-content: center;
}
Przykład
.grid-container {
display: grid;
justify-content: start;
}
Przykład
.grid-container {
display: grid;
justify-content: end;
}
Właściwość wyrównania treści
Właściwość align-contentsłuży do
pionowego wyrównania całej siatki wewnątrz kontenera.
1
2
3
4
5
6
Uwaga: Całkowita wysokość siatki musi być mniejsza niż wysokość kontenera, aby align-contentwłaściwość miała jakikolwiek efekt.
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Przykład
.grid-container {
display: grid;
height: 400px;
align-content: end;
}