InnoMarts logo
InnoMarts
Fast websites
← Back to course

Layout z CSS Grid

Layout z CSS Grid

Witaj ponownie.

W poprzedniej lekcji poznałeś Flexbox.

Flexbox świetnie nadaje się do organizowania elementów w jednym kierunku.

Rows.

Columns.

Centered things.

Życie stało się trochę mniej chaotyczne.

Teraz poznajemy CSS Grid.

Grid służy do two-dimensional layouts.

Czyli do rows i columns jednocześnie.

Flexbox jest jak ustawianie krzeseł w jednej linii.

Grid jest jak planowanie całego pokoju.

Ściany.

Stoły.

Okna.

I to jedno krzesło, którego nikt nie wie, gdzie postawić.

Grid daje ci poważną kontrolę nad layout.

I tak, na początku może wyglądać trochę groźnie.

Ale bez paniki.

Grid nie jest potworem.

To po prostu bardzo dobrze zorganizowana tabela z lepszym wyczuciem stylu.

Czego Się Nauczysz

W tej lekcji nauczysz się:

Czym Jest CSS Grid?

CSS Grid to layout system do organizowania elementów w rows i columns.

Pomaga tworzyć:

Flexbox jest najlepszy dla jednego kierunku.

Grid jest najlepszy dla dwóch kierunków.

Przykład:

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

To tworzy trzy równe columns.

Każde 1fr oznacza jedną część dostępnej przestrzeni.

CSS sam robi matematykę.

I tym razem nie musisz liczyć wszystkiego ręcznie jak zmęczony księgowy z klawiaturą.

Grid vs Flexbox

Używaj Flexbox, kiedy potrzebujesz jednego kierunku:

Używaj Grid, kiedy potrzebujesz rows i columns:

Flexbox mówi:

“Pozwól mi ustawić te elementy w jednej linii.”

Grid mówi:

“Daj mi cały plan pokoju.”

Oba są użyteczne.

Żadne nie jest magią.

Ale Grid czasem wygląda jak magia, kiedy layout wreszcie przestaje się z tobą kłócić.

Stwórz Projekt

Stwórz folder dla tej lekcji:

mkdir css-lesson6
cd css-lesson6
touch index.html
touch style.css

Powinieneś mieć:

css-lesson6/
  index.html
  style.css

Otwórz folder w swoim edytorze.

Zbudujemy stronę z course cards.

Będzie miała:

Prosty pomysł.

Bardzo użyteczny pattern.

Będziesz używać takiego layoutu wszędzie.

Courses.

Blog posts.

Services.

Portfolio projects.

Nawet pizza menu, jeśli pizza poważnie traktuje frontend architecture.

Napisz HTML

Otwórz index.html i dodaj to:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout z CSS Grid</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Layout z CSS Grid</h1>
    <p>Buduj czyste rows i columns bez utraty spokoju ducha.</p>
  </header>

  <main class="page">
    <section class="intro">
      <h2>Tematy Kursu</h2>
      <p>
        CSS Grid pomaga tworzyć potężne two-dimensional layouts za pomocą rows i columns.
      </p>
    </section>

    <section class="course-grid">
      <article class="course-card">
        <h2>HTML Basics</h2>
        <p>Poznaj strukturę stron internetowych.</p>
      </article>

      <article class="course-card">
        <h2>CSS Styling</h2>
        <p>Spraw, żeby strony były czytelne, czyste i piękne.</p>
      </article>

      <article class="course-card">
        <h2>Flexbox</h2>
        <p>Wyrównuj elementy w rows albo columns.</p>
      </article>

      <article class="course-card">
        <h2>CSS Grid</h2>
        <p>Buduj layouts z rows i columns jednocześnie.</p>
      </article>

      <article class="course-card">
        <h2>Responsive Design</h2>
        <p>Spraw, żeby strony działały dobrze na różnych screen sizes.</p>
      </article>

      <article class="course-card">
        <h2>Animations</h2>
        <p>Dodaj płynny ruch i interactive effects.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Stworzone podczas nauki CSS Grid.</p>
  </footer>
</body>
</html>

To daje nam sześć cards.

Bez CSS będą ustawione jedna pod drugą.

To normalne.

HTML robi swoją pracę.

Teraz CSS Grid wchodzi z tabletem i mówi:

“Dobra, organizujemy to.”

Zacznij od Podstawowych Stylów

Otwórz style.css i dodaj:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

To tworzy prosty header.

Teraz dodaj page container:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

To centruje main content i ogranicza jego szerokość.

Layout bez max width może stać się za szeroki.

A bardzo szeroki tekst jest bolesny do czytania.

Jakby zdanie biegło maraton przez cały monitor.

Stwórz Grid Container

Aby stworzyć grid, użyj:

display: grid;

Dodaj to:

.course-grid {
  display: grid;
}

Teraz .course-grid staje się grid container.

Direct children stają się grid items.

W naszym przypadku każda .course-card staje się grid item.

Ale jeszcze nic dramatycznego się nie dzieje.

Stworzyliśmy grid container.

Teraz musimy zdefiniować columns.

CSS czeka na instrukcje.

Jak bardzo surowy assistant bez wyobraźni.

Zdefiniuj Columns

Do definiowania columns używamy grid-template-columns.

Dodaj to:

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

To tworzy trzy columns.

Każda column dostaje równą część dostępnej przestrzeni.

fr oznacza fraction.

Czyli to:

grid-template-columns: 1fr 1fr 1fr;

oznacza:

Podziel dostępną przestrzeń na trzy równe części.

Teraz masz three-column grid.

CSS nie narzekał.

Rzadki i piękny moment.

Jednostka fr

Jednostka fr oznacza część dostępnej przestrzeni.

Przykład:

grid-template-columns: 1fr 2fr;

To tworzy dwie columns.

Druga column jest dwa razy szersza niż pierwsza.

Przykład:

grid-template-columns: 1fr 1fr 1fr;

To tworzy trzy równe columns.

fr jest bardzo użyteczne, bo dostosowuje się do dostępnej przestrzeni.

Nie musisz pisać:

width: 33.333333%;

Ta liczba wygląda tak, jakby spreadsheet dostał bólu głowy.

Używaj fr.

Czyściej.

Przyjaźniej.

Mniej podejrzanie.

Dodaj Gap Między Grid Items

Teraz cards mogą być za blisko siebie.

Dodaj gap:

.course-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

gap tworzy przestrzeń między rows i columns.

To czystsze niż ręczne dodawanie margins do każdej card.

Dobry spacing sprawia, że layout jest czytelny.

Zły spacing sprawia, że strona wygląda jak ludzie stojący za blisko w elevator.

Nikt tego nie chce.

Nawet twoje cards.

Wystylizuj Cards

Dodaj to:

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Teraz cards wyglądają jak prawdziwe cards.

White background.

Padding.

Border.

Rounded corners.

Spokojny, uporządkowany layout.

Bez krzyku.

Bez chaosu.

Tylko organized boxes, czego CSS potajemnie chciał od samego początku.

Wystylizuj Intro Section

Dodaj to:

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

Intro section ma teraz:

To common pattern.

Highlighted intro box.

Prosto.

Czytelnie.

Nie próbuje zostać cyrkiem.

Dobrze.

Użyj repeat

Pisanie tak jest w porządku:

grid-template-columns: 1fr 1fr 1fr;

Ale CSS daje nam czystszą wersję:

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

To oznacza:

Stwórz 3 columns, każda o szerokości 1fr.

Zaktualizuj .course-grid:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Tak łatwiej czytać.

Szczególnie kiedy columns jest więcej.

Na przykład:

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

Cztery równe columns.

Prosto.

Elegancko.

CSS na chwilę założył garnitur.

Fixed i Flexible Columns

Możesz łączyć fixed i flexible columns.

Przykład:

grid-template-columns: 250px 1fr;

To tworzy:

Przykład:

grid-template-columns: 200px 1fr 1fr;

To tworzy:

To przydatne dla dashboards albo layouts z sidebar.

Ale dla simple cards repeat(3, 1fr) jest idealne.

Nie komplikuj bez potrzeby.

CSS i tak ma wystarczająco dużo miejsc, gdzie może ukryć trouble.

Grid Rows

Grid może też definiować rows.

Przykład:

grid-template-rows: auto auto;

Ale często rows tworzą się automatycznie.

W naszym card grid definiujemy columns.

Browser tworzy rows wtedy, kiedy są potrzebne.

Six cards.

Three columns.

Result:

Bardzo wygodne.

Browser robi nudną część.

Pozwalamy mu.

Cards o Równej Wysokości

Grid items w tym samym row domyślnie naturalnie rozciągają się do tej samej wysokości.

To oznacza: jeśli jedna card ma więcej tekstu, row nadal może wyglądać równo.

To jeden z powodów, dla których Grid świetnie nadaje się do cards.

Później możesz jeszcze lepiej zorganizować content wewnątrz każdej card za pomocą Flexbox.

Tak, Flexbox i Grid mogą pracować razem.

Nie są wrogami.

Są coworkers.

Czasem dziwnymi coworkers.

Ale nadal coworkers.

Responsive Grid Problem

Nasz grid ma trzy columns:

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

Na desktop wygląda to dobrze.

Ale na małym phone screen trzy columns mogą stać się zbyt wąskie.

Cards cierpią.

Text cierpi.

Users cierpią.

A potem wszyscy obwiniają CSS.

Dlatego potrzebujemy responsive design.

Responsive design porządnie poznamy w następnej lekcji, ale już teraz możemy zrobić proste ulepszenie.

Prosty Responsive Grid

Dodaj to na końcu CSS:

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

To oznacza:

Teraz layout się dostosowuje.

Cards mogą oddychać.

Phone nie płacze.

Good responsive behavior.

Bardzo ważne.

Pełny CSS

Twój style.css powinien wyglądać tak:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 56px 24px;
}

.site-header h1 {
  margin: 0 0 12px;
  font-size: 48px;
}

.site-header p {
  margin: 0;
  color: #d1d5db;
  font-size: 20px;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro {
  background-color: white;
  padding: 32px;
  border-radius: 18px;
  margin-bottom: 24px;
  border-left: 6px solid #2563eb;
}

.intro h2 {
  margin-top: 0;
  font-size: 32px;
}

.intro p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.course-card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 18px;
}

.course-card h2 {
  margin-top: 0;
  font-size: 24px;
}

.course-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .course-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

Zapisz.

Odśwież.

Zmień rozmiar browser.

Zobacz, jak grid się zmienia.

Three columns.

Two columns.

One column.

To CSS Grid robi poważną robotę.

Cicho.

Jak professional, który nie potrzebuje oklasków, ale zdecydowanie zasługuje na kawę.

Częste Błędy

Zapomnienie display grid

Źle:

.course-grid {
  grid-template-columns: repeat(3, 1fr);
}

Dobrze:

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Bez display: grid grid properties nic nie robią.

CSS po prostu zignoruje twoje piękne plany.

Zimno.

Ale przewidywalnie.

Tworzenie Zbyt Wielu Columns

To może wyglądać dobrze na ogromnym screen:

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

Ale na mniejszych screens robi się nieczytelne.

Nie zmuszaj layoutu do zbyt wielu columns.

Layout ma służyć content.

A nie ściskać go jak walizkę przed tanim lotem.

Zapomnienie gap

Grid bez gap może wyglądać tłoczno.

Lepiej:

.course-grid {
  display: grid;
  gap: 24px;
}

Spacing ma znaczenie.

Twój content potrzebuje przestrzeni.

Twój mózg też.

Praktyka

Stwórz stronę z:

Użyj CSS Grid, aby stworzyć:

Użyj:

Zmień liczbę cards.

Spróbuj 4.

Spróbuj 8.

Spróbuj 10.

Zobacz, jak Grid automatycznie tworzy rows.

Browser robi layout work za ciebie.

Pozwól mu.

Właśnie po to mamy tools.

Mini Wyzwanie

Stwórz project gallery.

Każda card powinna mieć:

Użyj Grid, aby pokazać projects w trzech columns.

Zrób jedną card special przez class:

<article class="project-card featured">

Potem wystylizuj ją inaczej:

.featured {
  border-color: #2563eb;
}

Spróbuj zrobić grid responsive.

To realny portfolio pattern.

Możesz użyć go dla swoich projects.

I tak, teraz twoje projects mogą stać w rows jak zdyscyplinowani mali soldiers.

Frontend soldiers.

With border radius.

Podsumowanie

Dzisiaj nauczyłeś się, że:

Grid jest potężny.

Flexbox nadal jest użyteczny.

One pracują razem.

Używaj Flexbox dla jednego kierunku.

Używaj Grid dla rows i columns.

Używaj obu, kiedy trzeba.

To nie cheating.

To frontend wisdom.

Następna Lekcja

W następnej lekcji nauczymy się responsive design.

Bo strona, która wygląda dobrze tylko na twoim laptop, jeszcze nie jest skończona.

Jest po prostu pewna siebie w jednym pokoju.