Zaawansowane Pozycjonowanie w CSS Grid

Wyobraź sobie, że jesteś architektem piramidy i musisz precyzyjnie określić, gdzie znajdzie się każda komnata, korytarz i skarbiec. Plan z poprzedniej lekcji ma jednak słaby punkt: gdy faraon dobuduje jedną kolumnę, każde 1 / 4 trzeba poprawić ręcznie. W CSS Grid masz do dyspozycji zaawansowane techniki pozycjonowania, które pozwalają kontrolować każdy element siatki z chirurgiczną precyzją i pisać plany odporne na przebudowę.

grid-column i grid-row z numerami linii

Każdy grid posiada ponumerowane linie, zarówno pionowe (kolumnowe), jak i poziome (wierszowe). Numeracja zaczyna się od 1. Jeśli masz 3 kolumny, masz 4 linie kolumnowe (1, 2, 3, 4). Możesz wskazać dokładną pozycję elementu, podając linię początkową i końcową:

1.pharaoh-chamber {
2  grid-column: 1 / 3;  /* Od linii 1 do linii 3 = zajmuje 2 kolumny */
3  grid-row: 1 / 2;     /* Od linii 1 do linii 2 = zajmuje 1 wiersz */
4}

Komnata faraona zajmuje dwie kolumny i jeden wiersz, bo kończy się na linii 3 i linii 2. Możesz też używać ujemnych numerów linii, liczonych od końca siatki. Linia -1 to zawsze ostatnia linia jawnej siatki, czyli tej zdefiniowanej w grid-template-columns:

1.footer {
2  grid-column: 1 / -1;  /* Od pierwszej do ostatniej linii = cała szerokość */
3}

Stopka sięga od pierwszej do ostatniej linii, a gdy dobudujesz kolumnę, nadal zajmie całą szerokość bez żadnej poprawki. Ujemne numery nie liczą jednak ścieżek, które przeglądarka dodała sama poza jawną siatką. To jak wyrysowanie precyzyjnych współrzędnych na planie piramidy, w którym każdy blok kamienia ma dokładnie wyznaczone miejsce.

Rozciąganie elementów - słowo kluczowe span

Zamiast podawać numery linii końcowej, możesz użyć słowa span, aby określić, ile komórek ma zajmować element:

1.grand-hall {
2  grid-column: span 2;  /* Rozciągnij na 2 kolumny od bieżącej pozycji */
3  grid-row: span 3;     /* Rozciągnij na 3 wiersze */
4}
5
6.treasure-room {
7  grid-column: 2 / span 2;  /* Zacznij od linii 2, zajmij 2 kolumny */
8  grid-row: 1 / span 1;
9}

Różnica między span a numerami linii jest taka, że span jest relatywne i mówi "zajmij N komórek", a numery linii są absolutne i mówią "od linii X do linii Y". Wielka sala bez linii startowej trafi tam, gdzie ustawi ją automatyczne rozmieszczanie, a skarbiec zaczyna się dokładnie na linii 2.

Nazwane linie grida

Liczby trudno zapamiętać, dlatego możesz nadać liniom nazwy, co czyni kod bardziej czytelnym. Nazwy umieszczamy w nawiasach kwadratowych między rozmiarami kolumn, a jedna linia może mieć kilka nazw naraz:

1.temple {
2  display: grid;
3  grid-template-columns:
4    [sidebar-start] 200px
5    [sidebar-end main-start] 1fr
6    [main-end aside-start] 250px
7    [aside-end];
8  grid-template-rows:
9    [header-start] 80px
10    [header-end content-start] 1fr
11    [content-end footer-start] 60px
12    [footer-end];
13}

Linia między panelem bocznym a treścią nosi dwie nazwy: sidebar-end i main-start. Rozmiary kolumn i wierszy są takie same jak bez nazw, bo nazwy tylko opisują linie. Bez nazw te same wiersze zapisałbyś krótko jako grid-template-rows: 80px 1fr 60px: stały nagłówek, elastyczna treść i stała stopka. Teraz możesz pozycjonować elementy, używając nazw zamiast numerów:

1.sidebar {
2  grid-column: sidebar-start / sidebar-end;
3  grid-row: content-start / content-end;
4}
5
6.main-content {
7  grid-column: main-start / main-end;
8  grid-row: content-start / content-end;
9}
10
11.header {
12  grid-column: sidebar-start / aside-end;  /* Cała szerokość */
13  grid-row: header-start / header-end;
14}

Nagłówek sięga od sidebar-start do aside-end, czyli przez całą szerokość. Nazwane linie to jak oznaczenia na planie architektonicznym: zamiast "linia 3" masz "początek głównej sali". O wiele łatwiej się w tym odnaleźć!

grid-area jako skrót pozycjonowania

Właściwość grid-area pozwala określić pozycję elementu w jednej linii. Format: grid-area: row-start / column-start / row-end / column-end. Wartości mogą być liczbami, ujemnymi liczbami albo nazwami linii:

1.pharaoh-throne {
2  grid-area: 1 / 1 / 3 / 3;
3  /* Wiersz od 1 do 3, kolumna od 1 do 3 = kwadrat 2x2 */
4}
5
6.guard-post {
7  grid-area: 3 / 1 / 4 / -1;
8  /* Ostatni wiersz, cała szerokość */
9}

Tron zajmuje kwadrat 2x2 w lewym górnym rogu, a posterunek straży dzięki -1 rozciąga się przez cały trzeci wiersz, niezależnie od liczby kolumn.

Praktyczny przykład: Plan świątyni egipskiej

Połączmy wszystkie techniki, aby stworzyć złożony plan świątyni. Kolumny mają nazwy wejścia, sali i kaplicy, a wiersze nazwy top, middle, bottom i end:

1.temple-complex {
2  display: grid;
3  grid-template-columns:
4    [entrance-start] 150px
5    [entrance-end hall-start] 1fr
6    [hall-end chapel-start] 200px
7    [chapel-end];
8  grid-template-rows:
9    [top] 100px
10    [middle] 1fr
11    [bottom] 80px
12    [end];
13  gap: 10px;
14  min-height: 400px;
15}
16
17.entrance {
18  grid-column: entrance-start / chapel-end;  /* Cała szerokość */
19  grid-row: top / middle;
20}
21
22.main-hall {
23  grid-area: middle / hall-start / bottom / hall-end;
24}
25
26.side-chapel {
27  grid-column: chapel-start / chapel-end;
28  grid-row: middle / end;  /* Dwa wiersze */
29}
30
31.storage {
32  grid-column: entrance-start / entrance-end;
33  grid-row: middle / bottom;
34}
35
36.foundation {
37  grid-column: 1 / -1;  /* Cała szerokość używając numerów */
38  grid-row: bottom / end;
39}

Wejście zajmuje cały górny wiersz, główna sala korzysta z grid-area zapisanego samymi nazwami, a fundament miesza nazwy z liczbami. Zauważ, że kaplica boczna i fundament dzielą ostatni wiersz w kolumnie kaplicy. Jawnie pozycjonowane elementy mogą na siebie nachodzić i nie jest to błąd składni. Wyżej rysowany jest ten, który stoi później w HTML, chyba że zmienisz mu z-index. W prawdziwym projekcie skróć więc kaplicę do jednego wiersza albo świadomie wykorzystaj nakładanie.

Wyróżnione eksponaty w galerii

Zaawansowane pozycjonowanie świetnie łączy się z automatyczną siatką. Galeria sama liczy kolumny dzięki repeat(auto-fill, minmax(250px, 1fr)), a wyróżniony posąg zajmuje kwadrat dwa na dwa:

1.gallery {
2  display: grid;
3  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
4  gap: 16px;
5}
6
7.gallery .featured {
8  grid-column: span 2;
9  grid-row: span 2;
10}

Każda kolumna ma od 250px do 1fr, a pozostałe eksponaty układają się wokół posągu. Gdy ekran zmieści tylko jedną kolumnę, span 2 zmusi przeglądarkę do dobudowania dodatkowej, niejawnej kolumny poza zaplanowaną siatką, dlatego na wąskich ekranach bezpieczniej cofnąć span w media query. Duże elementy zostawiają też czasem puste komórki, a grid-auto-flow: dense pozwala przeglądarce wypełnić je mniejszymi elementami, kosztem zmiany kolejności wizualnej.

Dzięki tym zaawansowanym technikom pozycjonowania możesz precyzyjnie rozmieszczać elementy w siatce. Numery linii dają Ci pełną kontrolę, span upraszcza rozciąganie, nazwane linie czynią kod czytelnym, a grid-area pozwala na zwięzły zapis. Moja rada: w układach stron używaj nazwanych linii albo 1 / -1, a span zostaw dla kart i eksponatów. Wszystko to połączysz w projekcie Abu Simbel na końcu modułu. W piaskownicy poniżej czeka portal świątyni: zdefiniuj dla niego grid-template-areas, przypisz elementy do obszarów, a potem spróbuj tego samego z nazwanymi liniami.

Pamiętaj: nazwana linia to napis wyryty na planie świątyni, który nie zgubi się nawet wtedy, gdy faraon każe dobudować kolejną komnatę.

1<!DOCTYPE html>
2<html lang="pl">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Grid Template Areas</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="portal">
11        <header class="portal-header">Swiatynia Wiedzy</header>
12        <nav class="portal-nav">
13            <a href="#">Start</a>
14            <a href="#">Piramidy</a>
15            <a href="#">Faraonowie</a>
16            <a href="#">Hieroglify</a>
17        </nav>
18        <section class="portal-hero">Sekcja Hero - Odkryj tajemnice</section>
19        <main class="portal-content">
20            <h2>Glowna Tresc</h2>
21            <p>Tu znajdziesz wiedze o starozytnym Egipcie.</p>
22        </main>
23        <aside class="portal-sidebar">
24            <h3>Panel Boczny</h3>
25            <p>Ciekawostki i dodatkowe informacje.</p>
26        </aside>
27        <footer class="portal-footer">Stopka Swiatyni</footer>
28    </div>
29    <!-- Zadanie: Zdefiniuj grid-template-areas i przypisz elementy -->
30</body>
31</html>