Zaawansowane Pozycjonowanie w CSS Grid

@name, wyobraź sobie, że jesteś architektem piramidy i musisz precyzyjnie określić, gdzie znajdzie się każda komnata, korytarz i skarbiec. W CSS Grid masz do dyspozycji zaawansowane techniki pozycjonowania, które pozwalają Ci kontrolować każdy element siatki z chirurgiczną precyzją!

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}

Możesz też używać ujemnych numerów linii, liczone od końca siatki:

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

To jak wyrysowanie precyzyjnych współrzędnych na planie piramidy - 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 - mówi "zajmij N komórek", a numery linii są absolutne - mówią "od linii X do linii Y".

Nazwane linie grida

Możesz nadać liniom nazwy, co czyni kod bardziej czytelnym. Nazwy umieszczamy w nawiasach kwadratowych:

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}

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}

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

:

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}

Praktyczny przykład: Plan świątyni egipskiej

Połączmy wszystkie techniki, aby stworzyć złożony plan świątyni:

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}

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. Każdy egipski architekt marzyłby o takich narzędziach!