Budowanie bardziej złożonego layoutu z CSS Grid

Budowanie bardziej złożonego layoutu z CSS Grid

Flexbox jest świetny do układania elementów w jednym kierunku (np. rząd lub kolumna), ale gdy potrzebujesz precyzyjnej kontroli nad całym layoutem – z pomocą przychodzi CSS Grid.

Grid pozwala tworzyć struktury w dwóch wymiarach jednocześnie: wiersze i kolumny.
To idealne narzędzie, gdy chcesz zbudować np. galerię, siatkę treści, layout z paskiem bocznym lub bardziej złożoną stronę główną.

🔹 Przykład 1 – podstawowy layout w Gridzie

Załóżmy, że chcesz zbudować layout z nagłówkiem, paskiem bocznym, główną treścią i stopką:

<div class="grid-layout">
  <header>Nagłówek</header>
  <aside>Menu boczne</aside>
  <main>Treść główna</main>
  <footer>Stopka</footer>
</div>

.grid-layout {
  display: grid;
  grid-template-areas: 
    "header header"
    "aside main"
    "footer footer";
  grid-template-columns: 1fr 3fr;
  gap: 20px;
  padding: 20px;
}

header {
  grid-area: header;
  background: #1976d2;
  color: white;
  padding: 16px;
}

aside {
  grid-area: aside;
  background: #e3f2fd;
  padding: 16px;
}

main {
  grid-area: main;
  background: #ffffff;
  padding: 16px;
}

footer {
  grid-area: footer;
  background: #1976d2;
  color: white;
  padding: 16px;
}

Efekt: strona ma teraz dwukolumnowy układ z wyraźnie zdefiniowanymi sekcjami. To bardzo czytelne i łatwe w utrzymaniu rozwiązanie.

🔹 Przykład 2 – galeria treści w siatce

Kolejne popularne zastosowanie Grid to galerie zdjęć, wpisów, produktów itd. Można to zrobić np. tak:

<div class="gallery">
  <div>Element 1</div>
  <div>Element 2</div>
  <div>Element 3</div>
  <div>Element 4</div>
</div>

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

.gallery div {
  background: #f5f5f5;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}

Efekt: galeria automatycznie dostosowuje się do szerokości ekranu – świetnie działa zarówno na desktopie, jak i mobile.

🔧 Kiedy wybrać Flexbox, a kiedy Grid?

• Flexbox – kiedy układasz elementy w jednym kierunku (menu, rząd przycisków, pojedyncza sekcja),
• Grid – kiedy projektujesz cały layout lub potrzebujesz precyzyjnego podziału przestrzeni (np. galerie, layouty z paskiem bocznym).

📱 Dodaj responsywność – Media Queries z Gridem

Tak samo jak przy Flexboxie, możesz łatwo dostosować siatkę do różnych ekranów:

@media (max-width: 768px) {
  .grid-layout {
    grid-template-areas: 
      "header"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Efekt: na telefonach układ przechodzi w jedną kolumnę – idealny do mobilnych stron.

Podsumowanie

• CSS Grid pozwala tworzyć zaawansowane layouty w dwóch wymiarach – kolumny i wiersze.
• Możesz budować złożone siatki, układy z sidebarami, galerie i inne sekcje.
• grid-template-areas pozwala logicznie opisać strukturę strony.
• Layout zbudowany w Gridzie jest czytelny, elastyczny i łatwy do rozbudowy.

Na tym etapie Twój projekt ma już kompletną strukturę – sekcje, kolumny, układ mobilny.
W kolejnym kroku dodasz multimedia i formularz kontaktowy!