Kurs HTML

Problem z numerami linii

Używanie numerów linii do umieszczania elementów (np. grid-column: 2 / 4;) jest precyzyjne, ale może stać się trudne do zarządzania i mało czytelne w bardziej złożonych siatkach. Jeśli dodasz lub usuniesz kolumnę/wiersz, numery linii się zmienią, co może wymagać aktualizacji wielu reguł CSS.

Aby temu zaradzić, CSS Grid Layout pozwala **nazywać linie siatki** podczas ich definiowania w grid-template-columns i grid-template-rows. Następnie można używać tych nazw zamiast numerów linii do umieszczania elementów.

Definiowanie nazwanych linii

Nazwy linii umieszcza się w nawiasach kwadratowych [] bezpośrednio **przed** lub **po** definicji rozmiaru ścieżki (kolumny lub wiersza). Jedna linia może mieć wiele nazw.

.container {
  display: grid;
  /* Definicja kolumn z nazwanymi liniami */
  grid-template-columns: [full-start sidebar-start] 150px [sidebar-end content-start] 1fr [content-end full-end];
  /* Linie:
     1: [full-start, sidebar-start]
     2: [sidebar-end, content-start]
     3: [content-end, full-end]
  */

  /* Definicja wierszy z nazwanymi liniami */
  grid-template-rows: [page-top header-start] 80px [header-end main-start] auto [main-end footer-start] 50px [footer-end page-bottom];
  /* Linie:
     1: [page-top, header-start]
     2: [header-end, main-start]
     3: [main-end, footer-start]
     4: [footer-end, page-bottom]
  */
  gap: 10px;
}
Kopiuj

W powyższym przykładzie:

• Pierwsza linia pionowa ma nazwy full-start i sidebar-start.
• Druga linia pionowa ma nazwy sidebar-end i content-start.
• Trzecia (ostatnia) linia pionowa ma nazwy content-end i full-end.
• Podobnie nazwano linie poziome, definiując obszary dla nagłówka, treści głównej i stopki.

Nazwy linii mogą być dowolnymi ciągami znaków (z wyjątkiem słów kluczowych jak span), ale zaleca się używanie opisowych nazw.

Używanie nazwanych linii do umieszczania elementów

Po zdefiniowaniu nazwanych linii, można ich używać w właściwościach grid-column-start, grid-column-end, grid-row-start, grid-row-end oraz w skrótach grid-column i grid-row, zamiast numerów linii.

<div class="container">
  <header class="grid-item">Nagłówek</header>
  <aside class="grid-item">Sidebar</aside>
  <main class="grid-item">Treść główna</main>
  <footer class="grid-item">Stopka</footer>
</div>Kopiuj

/* ... definicja .container z nazwanymi liniami jak wyżej ... */

.grid-item {
  background-color: lightgrey;
  border: 1px solid grey;
  padding: 10px;
}

header {
  grid-column: full-start / full-end; /* Rozciągnij na całą szerokość */
  grid-row: header-start / header-end; /* Umieść w obszarze nagłówka */
  background-color: lightblue;
}

aside {
  grid-column: sidebar-start / sidebar-end; /* Umieść w obszarze sidebara */
  grid-row: main-start / main-end; /* Na wysokości treści głównej */
  background-color: lightgreen;
}

main {
  grid-column: content-start / content-end; /* Umieść w obszarze treści */
  grid-row: main-start / main-end; /* Na wysokości sidebara */
  background-color: lightyellow;
}

footer {
  grid-column: full-start / full-end; /* Rozciągnij na całą szerokość */
  grid-row: footer-start / footer-end; /* Umieść w obszarze stopki */
  background-color: lightcoral;
}
Kopiuj

Ten kod jest znacznie bardziej czytelny i łatwiejszy do zrozumienia niż używanie numerów linii. Jeśli w przyszłości dodamy nową kolumnę między sidebarem a treścią, wystarczy zaktualizować definicję grid-template-columns – reguły umieszczania elementów za pomocą nazw pozostaną poprawne.

Nazywanie linii za pomocą repeat()

Można również definiować nazwane linie wewnątrz funkcji repeat(). Nazwy podane w repeat() będą powtarzane dla każdej iteracji.

.container {
  display: grid;
  /* 4 kolumny, linie między nimi nazwane 'col-start' i 'col-end' */
  grid-template-columns: repeat(4, [col-start] 1fr [col-end]);
  /* Linie pionowe:
     1: [col-start]
     2: [col-end, col-start]
     3: [col-end, col-start]
     4: [col-end, col-start]
     5: [col-end]
  */
}

.item-special {
  /* Zajmij od drugiej linii 'col-start' do drugiej linii 'col-end' */
  /* Odpowiada to drugiej kolumnie siatki */
  grid-column: col-start 2 / col-end 2; 
}
Kopiuj

Gdy linia ma wiele nazw (jak col-end i col-start w powyższym przykładzie), można dodać numer po nazwie, aby wskazać, której instancji tej nazwy chcemy użyć (np. col-start 2 oznacza drugą linię o nazwie col-start).

Niejawne nazwy linii

Nawet jeśli jawnie nie nazwiesz linii, Grid tworzy dla nich niejawne nazwy oparte na nazwach obszarów siatki (grid-template-areas), jeśli ich używasz. Do każdej nazwanej linii tworzone są automatycznie dwie linie o nazwach <nazwa>-start i <nazwa>-end. Omówimy to dokładniej przy okazji grid-template-areas.