Lesson4

Lekcja 4: CSS Grid – Zrób Porządek Jak w Polskim Domu na Święta!

Wprowadzenie

Cześć, mistrzu kodowania! 🧐 Jeśli Flexbox był jak weekendowe porządki, to CSS Grid to prawdziwa świąteczna krzątanina u babci. Wyobraź sobie: stół zastawiony pierogami, kompot, sałatka jarzynowa, każdy talerz na swoim miejscu. CSS Grid pomoże ci zorganizować elementy na stronie z taką samą precyzją, jak ustawianie karpia na wigilijnym stole – bez chaosu, bez zająknięcia!

Po tym kursie będziesz w stanie stworzyć nawet najbardziej złożone układy, które będą wyglądać elegancko, jak babcine firanki. Gotowy, żeby zabłysnąć? Zaparz sobie herbatę, rozłóż notatki i zaczynamy!

Krok 1: Konfiguracja i Uruchomienie z Caddy – Świąteczny Stół Gotowy!

Zanim zaczniemy ustawiać krzesła i talerze, upewnijmy się, że nasz stół jest przygotowany. Skorzystajmy z Caddy, żeby uruchomić nasz projekt. Otwórz terminal i przejdź do folderu projektu:

cd ~/Documents/my-css-project

Uruchom serwer z Caddy:

caddy file-server --listen :8080

Twoja strona jest teraz dostępna pod adresem http://localhost:8080. Otwórz ją w przeglądarce i sprawdź, czy stół jest gotowy na wielkie świętowanie!

Uwaga: Zmiany w CSS nie są widoczne?

Jeśli wprowadzasz zmiany w pliku CSS, ale nie widzisz ich na stronie, przeglądarka może używać starej wersji. Aby temu zaradzić, wykonaj twarde odświeżenie:

Na Windows/Linux: CTRL + F5 lub CTRL + SHIFT + R
Na Mac: CMD + SHIFT + R

Teraz przeglądarka powinna wyświetlić stronę tak, jak sobie to wymyśliłeś!

Krok 2: Stworzenie Kontenera Grid – Jak Ułożyć Potrawy na Stole?

Aby używać CSS Grid, musisz przypisać display: grid; do kontenera. Wyobraź sobie, że to jak układanie sałatek na stole – od razu wiadomo, gdzie co ma stać, żeby każdy wiedział, gdzie szukać.

Przygotowanie HTML

Zacznijmy od przygotowania naszego stołu (HTML) i zaproszenia gości (elementów):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Świąteczne Porządki z CSS Grid</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="grid-container">
        <div class="item">Herbata</div>
        <div class="item">Filiżanka 1</div>
        <div class="item">Filiżanka 2</div>
        <div class="item">Cukiernica</div>
        <div class="item">Mlecznik</div>
        <div class="item">Pierniki</div>
    </div>
</body>
</html>

A teraz sprawmy, żeby nasz styles.css plik wprowadził porządek:

`styles.css`

body {
    font-family: 'Georgia', serif;
}

.grid-container {
    display: grid; /* Ustalamy zasady gry! */
    grid-template-columns: auto auto auto; /* Trzy kolumny – idealnie na świąteczny stół. */
    gap: 20px; /* Trochę przestrzeni między potrawami, żeby nikt nie przewrócił kompotu. */
    padding: 20px;
    background-color: #f5f5f5; /* Stół jest gotowy, obrus wyprasowany. */
}

.item {
    padding: 20px;
    background-color: #ddd;
    border: 2px solid #ccc;
    text-align: center;
    font-weight: bold;
}

Zapisz pliki i odśwież stronę na http://localhost:8080. Voilà! Teraz twoje elementy są ułożone równo, jak karp na środku stołu.

Krok 3: Precyzyjne Ustawianie Elementów – Jak Usadzić Rodzinę na Wigilię?

CSS Grid pozwala ci dokładnie ustawić każdy element na stronie. To trochę jak przypisywanie miejsc gościom przy stole: nie chcesz, żeby ciotka Jadzia siedziała obok wujka Henia, bo wtedy zacznie się dyskusja o polityce! Użyjemy CSS Grid, żeby wszystko było dokładnie na swoim miejscu.

Dodaj to do grid-container:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Środkowa kolumna dwa razy większa — dla największej potrawy! */
    grid-template-rows: auto auto; /* Dwa wiersze dla równowagi. */
}

Teraz przypiszmy miejsca:

.item:nth-child(1) {
    grid-column: 2 / 3; /* Herbata – centrum uwagi, jak pierogi na Wigilii! */
    grid-row: 1 / 3; /* Zajmuje oba rzędy – VIP na stole! */
}

.item:nth-child(2) {
    grid-column: 1 / 2; /* Filiżanka 1 po lewej stronie. */
}

.item:nth-child(3) {
    grid-column: 3 / 4; /* Filiżanka 2 po prawej. Wszystko pod linijkę! */
}

Wystarczy kilka zmian, a twoja strona wygląda jak stół przygotowany do świątecznego obiadu.

Krok 4: Dopieszczanie Layoutu – Jak Układanie Pierogów w Rządku!

CSS Grid pozwala zarządzać wierszami i kolumnami osobno, jak planowanie układu ciast na świątecznym stole. Zróbmy tak, żeby cukiernica zajmowała dwie kolumny, bo wiadomo – wszyscy lubią cukier!

Cukiernica na Honorowym Miejscu

.item:nth-child(4) {
    grid-column: 1 / 3; /* Dwie kolumny – dla prawdziwej królowej słodkości. */
    background-color: #ffeeba; /* Dodajmy złocisty kolor, żeby się wyróżniała! */
}

Teraz cukiernica jest gwiazdą stołu, ale nie martw się, mlecznik też wygląda dobrze w swoim rogu.

Podsumowanie

Brawo, mistrzu układu! 🥂 Teraz twoje elementy są uporządkowane jak w szafce z przyprawami — każdy słoiczek na swoim miejscu. W następnym kursie porozmawiamy o media queries — jak zmieniać układ, jeśli przyjdą jeszcze bardziej wymagający goście z różnymi urządzeniami.

Do zobaczenia w kolejnym rozdziale, a tymczasem ciesz się swoim idealnie uporządkowanym świątecznym stołem! 🎄