Krótka wskazówka: nazwij linie siatki CSS, na wszelki wypadek

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Na siatce CSS każda linia posiada numer indeksu, do którego możemy się odnieść, aby umieścić na niej elementy siatki. Jednakże, możemy również nazwać każdą linię siatki, dzięki czemu łatwiej jest nam zarządzać naszymi układami siatek. Rzućmy okiem!

Nadchodzi siatka

Najczęstszą reakcją na poradnik dotyczący siatki jest "ale kiedy mogę tego użyć?", i to bardzo dobre pytanie. Faktem jest: siatka nadchodzi i wkrótce się pojawi.

"Siatka CSS będzie domyślnie wspierana w przeglądarkach Chrome i Firefox od marca 2017." – Eric Meyer

Jeśli jeszcze nie poznałeś tego elementu, najwyższy czas, aby to zrobić!

Numery linii siatki

Kiedy określamy siatkę, każda linia otrzymuje numer indeksu.

Uwaga: jeśli układ nie posiada ustawienia direction: rtl;, te numery zaczynają się od lewego górnego rogu siatki, a kończą na prawym dolnym.

Możemy odnieść się do tych numerów, aby umieścić elementy na siatce:

.item {
  grid-column: 2;
  grid-row: 3;
}

W tym przykładzie nasz element .item jest umieszczony w kolumnie 2 i wierszu 3.

Jednoznaczne nazwy linii siatki

Przy bardziej złożonych siatkach, można sobie wyobrazić, że odnoszenie wszystkiego do numerów może być nieco przytłaczające. W związku z tym, moduł siatki pozwala nam na jednoznaczne nazwanie linii, przy określaniu kolumn i wierszy naszej siatki.

Wykorzystajmy przykład, który pojawiał się przez całą serię. Oto nasza podstawowa siatka 3x3:

.grid-1 {
  display: grid;
  grid-template-columns: 100px auto 100px;
  grid-template-rows: 60px 130px 50px;
  grid-gap: 20px;
}

Teraz możemy owinąć wartości naszych kolumn i wierszy w nazwy linii (jakiekolwiek chcemy) za pomocą nawiasów kwadratowych.

.grid-1 {
  display: grid;
  grid-template-columns: [start] 100px [centre-start] auto [last-column-start] 100px [finish];
  grid-template-rows: [header-start] 60px [main-start] 130px [main-end] 50px [row-end];
  grid-gap: 20px;
}

Możemy teraz umieścić elementy za pomocą nazw, a nie numerów:

.item {
  grid-column: centre-start;
  grid-row: header-start;
}

Kilka wskazówek:

Nazwy mogą być dostosowane do twoich potrzeb, dlatego pomyśl logicznie o tym, co może ci pomóc rozpoznać i zapamiętać obszary siatki.
Pierwotne numery linii będą aktywne, więc nadal możesz ich używać.
Możesz określić wiele nazw dla jednej linii, na przykład: [main-end footer-start row-5] itp.
Nawet jeśli nazwiesz linie siatki, nie musisz z nich korzystać, ale to dobre nawyk "na wszelki wypadek", który warto praktykować.

Domniemane nazwy linii siatki

Kiedy celowo robimy rzeczy, takie jak nazywanie linii siatki, mówimy o nich jednoznaczne. Kiedy coś zakładamy, ale nie stwierdzamy bezpośrednio, określane jest jako domniemane. Omówiliśmy jednoznaczne nazywanie linii siatki, ale istnieją również okoliczności, w których nadajemy domniemane nazwy.

Być może pamiętasz z poprzedniego poradnika, że możemy określić obszary siatki.

CSS

Układ siatki CSS: używanie obszarów siatki

Ian Yates

W ten sposób, możemy określić cztery obszary siatki:

.grid-1 {
    /* ..existing styles */
     
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

Otrzymamy następujący układ:

Ustawiając obszar siatki header automatycznie przypisujesz nazwy do jego czterech linii granicznych. Linie wiersza stają się header-start i header-end, tak samo jak dwie linie kolumny stają się header-start i header-end. To samo dotyczy innych obszarów, które nazywają się main-start, main-end, sidebar-start, itd.

Uwaga: z drugiej strony, jednoznaczne dodawanie nazwanych linii w tym samym formacie (header-start i header-end) utworzy obszar siatki o nazwie header.

Możemy wykorzystać nazwy linii do umieszczania elementów tak jak to robiliśmy wcześniej. Istnieją one jako uzupełnienie do wszystkich nazw, które określiłeś i oryginalnych numerów indeksu linii.

Koniec linii

To wszystko, jeśli chodzi o tę wskazówkę! Pamiętaj: wejdź w nawyk nazywania linii i obszarów, aby łatwiej zarządzać siatką.