CSS Grid - układ siatki

CSS Grid – responsywny układ treści

Jeśli potrzebujesz tworzyć zaawansowane i elastyczne systemy układania elementów na stronie internetowej pomocny będzie CSS Grid Layout (siatka). Przede wszystkim pozwala to na tworzenie złożonych układów bez konieczności stosowania skomplikowanego kodu HTML. Co więcej pozwala na tworzenie złożonych i responsywnych układów w prosty sposób, wykorzystując dwuwymiarową siatkę, która składa się z rzędów i kolumn. Dzięki temu można precyzyjnie umieszczać poszczególne elementy w wybranych miejscach na stronie. Co więcej w tym artykule przeprowadzę Cię przez podstawy i bardziej zaawansowane zastosowania Grid Layout, wraz z praktycznymi przykładami.

Podstawy CSS Grid Layout

Podstawowe pojęcia

Kontener Grid: Element, który posiada właściwość display: grid lub display: inline-grid.
Elementy Grid: Bezpośrednie dzieci kontenera Grid, które są ułożone w siatkę.

Definiowanie kontenera siatki

Aby rozpocząć pracę z Grid Layout, najpierw musimy określić element, który będzie naszym kontenerem siatki. Robimy to za pomocą właściwości CSS display: grid.

Tworzenie kontenera grid

Aby rozpocząć pracę z Grid Layout, musimy najpierw zdefiniować kontener Grid. Oto przykład:

.container {
  display: grid;
}

W HTML wygląda to tak:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Definiowanie kolumn i wierszy

Za pomocą właściwości grid-template-columns i grid-template-rows możemy definiować liczbę oraz rozmiar kolumn i wierszy.

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-template-rows: 50px 100px;
}

Tymczasem powyższy kod tworzy siatkę z trzema kolumnami (100px, 200px, 100px) i dwoma wierszami (50px, 100px).

Natomiast kod niżej tworzy siatkę z trzema kolumnami, każda o równej szerokości oraz dwoma rzędami, każdy o wysokości 150px.

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 150px);
}

Przykład 1: Prosta siatka

HTML:

<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>

CSS:

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

.grid-item {
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
}

Wynik:

Trzy kolumny o automatycznej szerokości.
Sześć elementów równomiernie rozłożonych w siatce.

Ustalanie przerw (Gaps)

Za pomocą grid-gap, grid-row-gap i grid-column-gap możemy definiować odstępy między wierszami i kolumnami.

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

Automatyczne dopasowanie (Auto-Fit i Auto-Fill)

W przypadku powyższych właściwości możemy tworzyć responsywne siatki, które dostosowują się do szerokości przeglądarki.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

Przykład 2: Responsywna siatka

HTML:

<div class="responsive-grid">
  <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>

CSS:

.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  background: lightblue;
  border: 1px solid #000;
  padding: 20px;
  text-align: center;
}

Wynik:

Elastyczne kolumny dostosowujące się do dostępnej przestrzeni.

Pozycjonowanie elementów

Za pomocą właściwości takich jak grid-column-start, grid-column-end, grid-row-start, grid-row-end, możemy precyzyjnie pozycjonować elementy w siatce.

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

Przykład 3: Niestandardowe pozycjonowanie

HTML:

<div class="custom-grid">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item item1">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

.custom-grid {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 50px 50px 50px;
  grid-gap: 10px;
}

.item1 {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
}

Wynik:

Element 3 rozciąga się na dwie kolumny i dwa wiersze.

Zarządzanie dużymi siatkami

W przypadku dużych siatek z wieloma elementami możemy używać nazw obszarów (grid-template-areas).

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "menu main main"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.menu {
  grid-area: menu;
}

.main {
  grid-area: main;
}

.footer {
  grid-area: footer;
}

Przykład 4: Układ strony

HTML:

<div class="page-grid">
  <div class="header">Header</div>
  <div class="menu">Menu</div>
  <div class="main">Main Content</div>
  <div class="footer">Footer</div>
</div>

CSS:

.page-grid {
  display: grid;
  grid-template-areas:
    "header header header"
    "menu main main"
    "footer footer footer";
  grid-gap: 10px;
}

.header {
  grid-area: header;
  background: lightcoral;
}

.menu {
  grid-area: menu;
  background: lightgreen;
}

.main {
  grid-area: main;
  background: lightblue;
}

.footer {
  grid-area: footer;
  background: lightgrey;
}

Wynik:

Układ strony z nagłówkiem, menu, główną zawartością i stopką.

Main Content