Szukaj…
Wprowadzenie
Układ siatki to nowy i wydajny system układu CSS, który pozwala w łatwy sposób podzielić zawartość strony internetowej na wiersze i kolumny.
Uwagi
Moduł układu siatki CSS Poziom 1 jest, od 9 września 2016 r., Rekomendacją dla kandydatów W3C. Uważa się, że jest na etapie testowania ( https://www.w3.org/Style/CSS/current-work) .
Od 3 lipca 2017 r. Przeglądarki Microsoft Internet Explorer 10 i 11 oraz Edge obsługują tylko starszą wersję specyfikacji, używając prefiksu dostawcy.
Podstawowy przykład
| własność | Możliwa wartość |
|---|---|
| pokaz | grid / inline-grid |
Siatka CSS jest zdefiniowana jako właściwość display. Dotyczy tylko elementu nadrzędnego i jego bezpośrednich elementów potomnych.
Rozważ następujące znaczniki:
<section class="container">
<div class="item1">item1</div>
<div class="item2">item2</div>
<div class="item3">item3</div>
<div class="item4">item4</div>
</section>
Najprostszym sposobem zdefiniowania powyższej struktury znaczników jako siatki jest po prostu ustawienie jej właściwości display na grid :
.container {
display: grid;
}
Jednak zrobienie tego niezmiennie spowoduje, że wszystkie elementy potomne zwiną się jeden na drugim. Jest tak, ponieważ dzieci nie wiedzą obecnie, jak ustawić się w siatce. Ale możemy im wyraźnie powiedzieć.
Najpierw musimy powiedzieć elementowi grid .container ile wierszy i kolumn będzie .container jego strukturę, i możemy to zrobić za pomocą właściwości grid-columns i grid-rows (zwróć uwagę na pluralizację):
.container {
display: grid;
grid-columns: 50px 50px 50px;
grid-rows: 50px 50px;
}
Jednak to wciąż niewiele nam pomaga, ponieważ musimy wydać zamówienie na każdy element potomny. Możemy to zrobić, określając wartości grid-row grid-column które powiedzą mu, gdzie się znajduje w siatce:
.container .item1 {
grid-column: 1;
grid-row: 1;
}
.container .item2 {
grid-column: 2;
grid-row: 1;
}
.container .item3 {
grid-column: 1;
grid-row: 2;
}
.container .item4 {
grid-column: 2;
grid-row: 2;
}
Nadając każdemu elementowi wartość kolumny i wiersza, identyfikuje kolejność elementów w kontenerze.
Zobacz działający przykład na JSFiddle . Musisz to zobaczyć w IE10, IE11 lub Edge, aby działało, ponieważ są to obecnie jedyne przeglądarki obsługujące układ siatki (z prefiksem dostawcy -ms- ) lub włącz flagę w Chrome, Opera i Firefox zgodnie z caniuse w kolejności testować z nimi.