Twoje Centrum Szkoleniowe

CSS Grid: zaawansowane siatki układu strony

CSS Grid Layout to moduł wprowadzony w CSS3, który rewolucjonizuje sposób projektowania układów stron. Umożliwia tworzenie siatek, w których elementy mogą być umieszczane w rzędach i kolumnach, co daje niespotykaną wcześniej kontrolę nad układem strony.

Dlaczego CSS Grid jest ważny?

• Układy dwuwymiarowe: Pozwala na kontrolowanie zarówno wierszy, jak i kolumn jednocześnie.
• Elastyczność: Ułatwia tworzenie responsywnych układów dostosowujących się do różnych rozmiarów ekranu.
• Skrócenie kodu: Umożliwia osiągnięcie złożonych układów z mniejszą ilością kodu w porównaniu z tradycyjnymi metodami.
• Intuicyjność: Zrozumiała i logiczna składnia, która odzwierciedla wizualny układ strony.

Podstawy CSS Grid

1. Grid Container (Kontener siatki)

Aby rozpocząć korzystanie z CSS Grid, należy zdefiniować element jako kontener siatki, ustawiając na nim właściwość display: grid lub display: inline-grid.

Przykład:

.container {
  display: grid;
}

2. Grid Items (Elementy siatki)

Elementy bezpośrednio znajdujące się wewnątrz kontenera siatki stają się elementami siatki (grid items).

3. Definiowanie kolumn i wierszy

Używamy właściwości grid-template-columns i grid-template-rows, aby określić strukturę siatki.

Przykład:

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

Powyższy kod tworzy siatkę z trzema kolumnami o szerokości 200px każda i dwoma wierszami o wysokości 150px.

Jednostki miary w CSS Grid

• Piksele (px): Jednostka stała.
• Procenty (%): Względem rozmiaru rodzica.
• Frakcje (fr): Jednostka wprowadzona w CSS Grid, reprezentuje ułamek dostępnej przestrzeni.

Przykład z jednostką fr:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Tutaj dostępna przestrzeń zostanie podzielona na 4 części (1+2+1), a kolumny otrzymają odpowiednio 1/4, 2/4 i 1/4 szerokości.

Przykład podstawowej siatki

HTML:

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

CSS:

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

.item {
  background-color: #3498db;
  color: #fff;
  font-size: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}

Wyjaśnienie:

• grid-template-columns: repeat(3, 1fr); tworzy trzy kolumny o równej szerokości.
• grid-template-rows: repeat(2, 150px); tworzy dwa wiersze o wysokości 150px.
• gap: 10px; dodaje odstępy między elementami siatki.

Umieszczanie elementów w siatce

1. Automatyczne rozmieszczenie

Domyślnie elementy siatki są umieszczane kolejno w dostępnych komórkach.

2. Ręczne rozmieszczenie za pomocą linii siatki

Każda linia siatki ma numerację zaczynającą się od 1. Możemy określić, gdzie element ma się zaczynać i kończyć, używając właściwości:

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

Skrócona składnia:

• grid-column: start / end;
• grid-row: start / end;

Przykład:

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

Powyższy kod sprawia, że element .item1 zajmuje kolumny od 1 do 3 (czyli dwie kolumny) i wiersz od 1 do 2.

3. Nazwy linii i obszarów

Możemy nazwać linie siatki lub tworzyć obszary siatki.

Definiowanie nazw linii:

.container {
  display: grid;
  grid-template-columns: [start] 1fr [middle] 1fr [end];
}

Definiowanie obszarów:

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.item-header {
  grid-area: header;
}

.item-sidebar {
  grid-area: sidebar;
}

.item-content {
  grid-area: content;
}

.item-footer {
  grid-area: footer;
}

HTML:

<div class="container">
  <div class="item-header">Header</div>
  <div class="item-sidebar">Sidebar</div>
  <div class="item-content">Content</div>
  <div class="item-footer">Footer</div>
</div>

Automatyczne wypełnianie siatki

Właściwości grid-auto-rows i grid-auto-columns definiują rozmiar automatycznie tworzonych wierszy i kolumn.

Przykład:

.container {
  display: grid;
  grid-auto-rows: 100px;
  grid-auto-flow: row;
}

Funkcje CSS Grid

1. repeat()

Pozwala na powtórzenie określonego wzorca.

Przykład:

grid-template-columns: repeat(4, 1fr);

2. minmax()

Określa minimalną i maksymalną wielkość ścieżki.

Przykład:

grid-template-columns: 1fr 1fr minmax(200px, 1fr);

3. auto-fill i auto-fit

Pozwalają na automatyczne wypełnienie dostępnej przestrzeni elementami.

Przykład:

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

Praktyczne zastosowania

1. Galeria obrazów responsywna

HTML:

<div class="gallery">
  <div class="item"><img src="image1.jpg" alt="Obrazek 1"></div>
  <div class="item"><img src="image2.jpg" alt="Obrazek 2"></div>
  <!-- Kolejne elementy -->
</div>

CSS:

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.gallery .item img {
  width: 100%;
  height: auto;
  display: block;
}

Wyjaśnienie:

• auto-fit sprawia, że siatka automatycznie dostosowuje liczbę kolumn do dostępnej przestrzeni.
• minmax(150px, 1fr) określa minimalną i maksymalną szerokość kolumn.

2. Układ strony z nagłówkiem, stopką i treścią

HTML:

<div class="grid-container">
  <header class="header">Nagłówek</header>
  <nav class="nav">Nawigacja</nav>
  <main class="main">Główna treść</main>
  <aside class="aside">Sidebar</aside>
  <footer class="footer">Stopka</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #1abc9c;
}

.nav {
  grid-area: nav;
  background-color: #2ecc71;
}

.main {
  grid-area: main;
  background-color: #3498db;
}

.aside {
  grid-area: aside;
  background-color: #9b59b6;
}

.footer {
  grid-area: footer;
  background-color: #34495e;
}

Wyjaśnienie:

• grid-template-areas definiuje układ strony.
• Każdemu elementowi przypisano odpowiednią nazwę obszaru za pomocą grid-area.

Dobre praktyki

• Używaj jednostek fr: Pozwalają one na elastyczne rozdzielanie dostępnej przestrzeni.
• Stosuj grid-template-areas dla czytelności: Ułatwia to wizualizację układu i utrzymanie kodu.
• Używaj minmax() dla responsywności: Pozwala to na dostosowanie rozmiaru elementów do różnych rozmiarów ekranu.
• Unikaj zbyt skomplikowanych siatek: Staraj się, aby układ był prosty i intuicyjny.
• Pamiętaj o kompatybilności przeglądarek: CSS Grid jest dobrze wspierany, ale zawsze warto przetestować stronę.

Częste błędy i jak ich unikać

• Zapominanie o display: grid: Bez tego elementy nie będą korzystać z właściwości CSS Grid.
• Nadmierne poleganie na numeracji linii: Może to utrudnić utrzymanie kodu. Warto stosować grid-template-areas.
• Niepoprawne użycie fr z jednostkami stałymi: Mieszanie fr z pikselami bez odpowiedniej wiedzy może prowadzić do nieoczekiwanych rezultatów.
• Brak box-sizing: border-box: Upewnij się, że to ustawienie jest włączone, aby uniknąć problemów z rozmiarami.
• Nieprzemyślana struktura HTML: Pamiętaj, że elementy siatki to bezpośrednie dzieci kontenera siatki.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym jest CSS Grid i jakie problemy rozwiązuje w tworzeniu układów stron.
• Jak zdefiniować kontener siatki za pomocą display: grid.
• Jak tworzyć kolumny i wiersze za pomocą grid-template-columns i grid-template-rows.
• Jak umieszczać elementy w siatce korzystając z linii siatki i obszarów.
• Wykorzystywać jednostki fr, minmax(), auto-fit i auto-fill do tworzenia elastycznych układów.
• Praktycznych zastosowań CSS Grid w tworzeniu galerii obrazów i układów stron.
• Dobrych praktyk w korzystaniu z CSS Grid oraz jak unikać typowych błędów.

CSS Grid to potężne narzędzie, które znacznie ułatwia tworzenie złożonych i responsywnych układów stron. Dzięki niemu możesz tworzyć układy, które wcześniej były trudne lub niemożliwe do osiągnięcia za pomocą samego CSS.

Zadania do samodzielnego wykonania

1. Stwórz stronę główną bloga:

   • Zaprojektuj układ z nagłówkiem, listą postów i stopką.
   • Użyj CSS Grid do rozmieszczenia postów w siatce.
   • Zadbaj o responsywność układu.

2. Zaprojektuj stronę galerii:

   • Stwórz galerię obrazów, która automatycznie dostosowuje liczbę kolumn do szerokości ekranu.
   • Wykorzystaj auto-fit i minmax().

3. Eksperymentuj z grid-template-areas:

   • Stwórz układ strony z różnymi sekcjami (np. nagłówek, nawigacja, treść, sidebar, stopka).
   • Zmieniaj układ sekcji dla różnych rozmiarów ekranu za pomocą zapytań medialnych (media queries).

Ciekawostka

Czy wiesz, że CSS Grid został oficjalnie wprowadzony jako rekomendacja W3C w 2017 roku? Chociaż prace nad nim trwały wiele lat, jego oficjalne wprowadzenie zrewolucjonizowało projektowanie układów stron internetowych, dając programistom narzędzie do tworzenia skomplikowanych i responsywnych układów z mniejszym nakładem pracy.