Moduł UKładu Siatki CSS

Nagłówek
Menu
Główna
Prawo
Stopka

Spróbuj Sam

Układ siatki

Moduł układu siatki CSS (CSS Grid Layout Module) oferuje układ oparty na siatce z wierszami i kolumnami, co ułatwia projektowanie stron internetowych bez konieczności używania float i pozycjonowania.

Obsługa przeglądarki

Wszystkie współczesne przeglądarki obsługują atrybuty siatki.

57.0 16.0 52.0 10 44

Elementy siatki

Layout siatki składa się z jednego elementu nadrzędnego oraz jednego lub kilku elementów podrzędnych.

Przykład

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
1
2
3
4
5
6
7
8
9

Spróbuj Sam

Atrybut Display

gdy atrybut HTML elementu display Atrybut ustawiony na grid lub inline-grid wtedy staje się kontenerem siatki.

Przykład

.grid-container {
  display: grid;
}

Spróbuj Sam

Przykład

.grid-container {
  display: inline-grid;
}

Spróbuj Sam

Wszystkie bezpośrednie podelementy kontenera siatki stają się automatycznie elementami siatki.

Kolumny siatki (Grid Columns)

Pionowa linia elementu siatki nazywa się kolumną.

Wiersze siatki (Grid Rows)

Pozioma linia elementu siatki nazywa się wierszem.

Odstępy siatki (Grid Gaps)

Odstęp między każdą kolumną/rownem nazywa się odstępem.

Możesz dostosować rozmiar odstępu za pomocą jednego z następujących atrybutów:

  • grid-column-gap
  • grid-row-gap
  • grid-gap

Przykład

grid-column-gap Atrybut ustawia odstęp między kolumnami:

.grid-container {
  display: grid;
  grid-column-gap: 50px;
}

Spróbuj Sam

Przykład

grid-row-gap Atrybut ustawia odstęp między wierszami:

.grid-container {
  display: grid;
  grid-row-gap: 50px;
}

Spróbuj Sam

Przykład

grid-gap Atrybut jest skróconą wersją atrybutów grid-row-gap i grid-column-gap:

.grid-container {
  display: grid;
  grid-gap: 50px 100px;
}

Spróbuj Sam

Przykład

grid-gap Atrybut może być użyty do ustawienia odstępu między wierszami i kolumnami na jedną wartość:

.grid-container {
  display: grid;
  grid-gap: 50px;
}

Spróbuj Sam

Linie Siatki (Grid Lines)

Linie między kolumnami nazywane są liniami kolumn (column lines).

Linie między wierszami nazywane są liniami wierszy (row lines).

Kiedy umieszczasz element siatki w kontenerze siatki, odwołuj się do numeru wiersza:

Przykład

Umieść element siatki na linii kolumny 1 i zakończ go na linii kolumny 3:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

Spróbuj Sam

Przykład

Umieść element siatki na linii wiersza 1 i zakończ go na linii wiersza 3:

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}

Spróbuj Sam