Pozycjonowanie Elementów w CSS Grid: Architektura Komnat Piramidy

Witaj ponownie! Teraz, gdy znasz już podstawy CSS Grid, czas nauczyć się precyzyjnie rozmieszczać elementy w siatce. Domyślnie siatka układa elementy po kolei, komórka po komórce, jak robotnicy kładący bloki od lewej do prawej. Sala tronowa nie może jednak stanąć tam, gdzie akurat wypadnie kolejka. Wyobraź sobie, że jesteś architektem piramidy i musisz dokładnie zaplanować, gdzie znajdzie się każda komnata, korytarz i sala tronowa. W CSS Grid masz do dyspozycji potężne narzędzia pozycjonowania!

Przypomnijmy plan budowy. Każdy układ Grid powstaje w tej samej kolejności: najpierw kontener z display: grid, potem kolumny (grid-template-columns), wiersze (grid-template-rows) i odstępy (gap), a na końcu pozycjonowanie elementów, któremu poświęcona jest ta lekcja. Kolumny możesz opisać ręcznie stałymi pikselami, proporcjami fr, wzorcem repeat(3, 1fr) albo w pełni automatycznie przez repeat(auto-fill, minmax(250px, 1fr)).

Grid Lines - Linie Siatki

Każdy grid ma 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). Zobaczmy to na siatce trzy na trzy:

1.container {
2  display: grid;
3  grid-template-columns: 1fr 1fr 1fr;
4  grid-template-rows: 100px 100px 100px;
5  gap: 10px;
6}

W powyższym przykładzie mamy linie kolumnowe 1-4 i linie wierszowe 1-4. Linie możesz liczyć także od końca: -1 oznacza ostatnią linię, co przyda się w kolejnej lekcji.

grid-column i grid-row

Aby umieścić element w konkretnym miejscu siatki, używamy właściwości grid-column i grid-row. Wskazujemy linię początkową i końcową, oddzielone ukośnikiem:

1.throne-room {
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}
5
6.corridor {
7  grid-column: 3 / 4;  /* Tylko trzecia kolumna */
8  grid-row: 1 / 4;     /* Rozciąga się przez 3 wiersze */
9}

Sala tronowa zajmuje dwie pierwsze kolumny górnego piętra, a wąski korytarz ciągnie się przez wszystkie trzy piętra w ostatniej kolumnie. Zwróć uwagę na najczęstszy błąd: zapis 1 / 3 nie oznacza trzech kolumn. Element kończy się na linii 3, więc zajmuje tylko kolumny pierwszą i drugą.

Słowo kluczowe span

Zamiast podawać numery linii, możesz użyć słowa span, aby określić, ile komórek ma zajmować element. To wygodne, gdy znasz rozmiar komnaty, ale nie chcesz liczyć linii:

1.grand-hall {
2  grid-column: span 2;  /* Rozciągnij na 2 kolumny */
3  grid-row: span 3;     /* Rozciągnij na 3 wiersze */
4}
5
6.small-chamber {
7  grid-column: 2 / span 1;  /* Zacznij od linii 2, zajmij 1 kolumnę */
8}

Wielka sala zacznie się tam, gdzie postawi ją automatyczne rozmieszczanie, i rozciągnie się na 2 kolumny oraz 3 wiersze. Mała komnata zaczyna się na linii 2 i zajmuje jedną kolumnę. Możesz więc łączyć oba zapisy: linię startową podajesz liczbą, a długość słowem span.

grid-area - Skrócony zapis

Właściwość grid-area pozwala określić pozycję elementu w jednej linii. Format: grid-area: row-start / column-start / row-end / column-end. Kolejność jest odwrotna niż w margin: tam idziemy zgodnie z ruchem wskazówek zegara, a tu podajemy górę, lewą stronę, dół i prawą stronę:

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

Komnata faraona zajmuje kwadrat 2x2 w lewym górnym rogu, a posterunek straży cały ostatni wiersz trzykolumnowej siatki. Do grid-area możesz też wpisać nazwę obszaru z grid-template-areas, który poznałeś w pierwszej lekcji o Grid.

Przykład praktyczny: Plan Świątyni

Połączmy wszystko w planie świątyni. Zaczynamy od struktury HTML z pięcioma pomieszczeniami, zapisanymi po prostu jedno pod drugim:

1<div class="temple">
2  <div class="entrance">Wejście</div>
3  <div class="main-hall">Główna Sala</div>
4  <div class="side-chapel">Kaplica Boczna</div>
5  <div class="inner-sanctuary">Sanktuarium</div>
6  <div class="treasury">Skarbiec</div>
7</div>

Kolejność elementów w HTML nie musi odpowiadać ich miejscu na planie, bo o tym decyduje CSS. Siatka ma cztery kolumny i trzy wiersze po 120px, a każda komnata dostaje własne współrzędne:

1.temple {
2  display: grid;
3  grid-template-columns: repeat(4, 1fr);
4  grid-template-rows: repeat(3, 120px);
5  gap: 8px;
6}
7
8.entrance {
9  grid-column: 2 / 4;  /* Środkowe kolumny */
10  grid-row: 1;
11}
12
13.main-hall {
14  grid-column: 1 / 5;  /* Cała szerokość */
15  grid-row: 2;
16}
17
18.side-chapel {
19  grid-column: 1 / 2;
20  grid-row: 3;
21}
22
23.inner-sanctuary {
24  grid-column: 2 / 4;
25  grid-row: 3;
26}
27
28.treasury {
29  grid-column: 4 / 5;
30  grid-row: 3;
31}

Wejście stoi w dwóch środkowych kolumnach pierwszego wiersza, główna sala zajmuje całą szerokość, bo cztery kolumny kończą się na linii 5, a w ostatnim wierszu obok siebie stoją kaplica, sanktuarium i skarbiec. Zapis grid-row: 1 to skrót: element zaczyna się na linii 1 i zajmuje jeden wiersz. Pamiętaj, że czytniki ekranu i klawiatura podążają za kolejnością w HTML, a nie na ekranie, więc nie przestawiaj elementów tak, by ta logika się rozjechała.

Moja rada: do pojedynczych elementów używaj span, a plan całej strony opisuj numerami linii albo nazwanymi obszarami. W piaskownicy poniżej znajdziesz ten sam plan świątyni. Przenieś skarbiec do pierwszej kolumny i zobacz, jak zmienia się układ. W następnej lekcji poznasz ujemne numery linii i nazwane linie siatki.

Dzięki tym technikom możesz precyzyjnie rozmieszczać elementy w siatce, zupełnie jak architekt planujący każdą komnatę w egipskiej świątyni. Pamiętaj: numery linii to współrzędne na planie piramidy, bo wskazujesz, gdzie komnata się zaczyna i na której linii się kończy.

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>Pozycjonowanie w CSS Grid</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <h1>Plan Swiatyni Egipskiej</h1>
11    <div class="temple">
12        <div class="entrance">Wejscie</div>
13        <div class="main-hall">Glowna Sala</div>
14        <div class="side-chapel">Kaplica Boczna</div>
15        <div class="inner-sanctuary">Sanktuarium</div>
16        <div class="treasury">Skarbiec</div>
17    </div>
18    <!-- Zadanie: Uzyj grid-column i grid-row aby rozmiesci elementy -->
19    <!-- Wejscie: kolumny 2-4, wiersz 1 -->
20    <!-- Glowna Sala: cala szerokosc (1-5), wiersz 2 -->
21    <!-- Kaplica Boczna: kolumna 1, wiersz 3 -->
22    <!-- Sanktuarium: kolumny 2-4, wiersz 3 -->
23    <!-- Skarbiec: kolumna 4, wiersz 3 -->
24</body>
25</html>