CSS Grid Container
1
2
3
4
5
6
7
8
Mřížkový kontejner
Aby se element HTML choval jako mřížkový kontejner, musíte nastavit display
vlastnost na
grid
nebo inline-grid
.
Kontejnery mřížky se skládají z položek mřížky umístěných uvnitř sloupců a řádků.
Vlastnost grid-template-columns
Vlastnost grid-template-columns
definuje počet sloupců v rozložení mřížky a může definovat šířku každého sloupce.
Hodnota je seznam oddělený mezerami, kde každá hodnota definuje šířku příslušného sloupce.
Pokud chcete, aby rozvržení mřížky obsahovalo 4 sloupce, zadejte šířku těchto 4 sloupců nebo „automaticky“, pokud by všechny sloupce měly mít stejnou šířku.
Příklad
Vytvořte mřížku se 4 sloupci:
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}
Poznámka: Pokud máte více než 4 položky v mřížce se 4 sloupci, mřížka automaticky přidá nový řádek, do kterého položky vložíte.
Vlastnost grid-template-columns
lze také použít k určení velikosti (šířky) sloupců.
Příklad
Nastavte velikost pro 4 sloupce:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}
Vlastnost grid-template-rows
Vlastnost grid-template-rows
definuje výšku každého řádku.
1
2
3
4
5
6
7
8
Hodnota je seznam oddělený mezerami, kde každá hodnota definuje výšku příslušného řádku:
Příklad
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}
Vlastnost justify-content
Vlastnost justify-content
se používá k zarovnání celé mřížky uvnitř kontejneru.
1
2
3
4
5
6
Poznámka:justify-content
Aby vlastnost měla nějaký účinek , musí být celková šířka mřížky menší než šířka kontejneru .
Příklad
.grid-container {
display: grid;
justify-content: space-evenly;
}
Příklad
.grid-container {
display: grid;
justify-content: space-around;
}
Příklad
.grid-container {
display: grid;
justify-content: space-between;
}
Příklad
.grid-container {
display: grid;
justify-content: center;
}
Příklad
.grid-container {
display: grid;
justify-content: start;
}
Příklad
.grid-container {
display: grid;
justify-content: end;
}
Vlastnost align-content
Vlastnost align-content
se používá k
vertikálnímu zarovnání celé mřížky uvnitř kontejneru.
1
2
3
4
5
6
Poznámka:align-content
Aby vlastnost měla nějaký účinek , musí být celková výška mřížky menší než výška kontejneru .
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: center;
}
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
Příklad
.grid-container {
display: grid;
height: 400px;
align-content: end;
}