Pozycjonowanie Elementów w CSS Grid: Architektura Komnat Piramidy

Witaj ponownie, @name! Teraz, gdy znasz już podstawy CSS Grid, czas nauczyć się precyzyjnie rozmieszczać elementy w siatce. 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!

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).

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.

grid-column i grid-row

Aby umieścić element w konkretnym miejscu siatki, używamy właściwości

grid-column

i

grid-row

. Możemy wskazać linię początkową i końcową:

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}

To jak projektowanie planu piramidy - sala tronowa zajmuje całą szerokość, a wąski korytarz ciągnie się przez wszystkie piętra!

Słowo kluczowe span

Zamiast podawać numery linii, 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 */
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}

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

.

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}

Przykład praktyczny: Plan Świątyni

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>

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}

Dzięki tym technikom możesz precyzyjnie rozmieszczać elementy w siatce, zupełnie jak architekt planujący każdą komnatę w egipskiej świątyni!