Kurs HTML

Podstawy umieszczania elementów w siatce

Domyślnie, elementy Grid są umieszczane automatycznie w kolejnych dostępnych komórkach siatki, wypełniając ją wiersz po wierszu (lub kolumna po kolumnie, w zależności od grid-auto-flow).

CSS Grid Layout oferuje jednak potężne mechanizmy do **jawnego określania**, gdzie dokładnie w siatce ma się znaleźć dany element i ile komórek ma zajmować. Jednym z podstawowych sposobów jest wykorzystanie **numerów linii siatki**.

Pamiętaj, że linie siatki są numerowane od 1. W siatce N x M (N kolumn, M wierszy) jest N+1 linii pionowych i M+1 linii poziomych.

Do umieszczania elementów za pomocą linii siatki służą cztery właściwości, stosowane do **elementu Grid**:

• grid-column-start: Określa pionową linię siatki, od której zaczyna się obszar elementu.
• grid-column-end: Określa pionową linię siatki, na której kończy się obszar elementu.
• grid-row-start: Określa poziomą linię siatki, od której zaczyna się obszar elementu.
• grid-row-end: Określa poziomą linię siatki, na której kończy się obszar elementu.

Używanie numerów linii

Najprostszym sposobem jest podanie numeru linii jako wartości tych właściwości.

<div class="container">
  <div class="item item-1">Element 1</div>
  <div class="item item-2">Element 2</div>
  <!-- ... inne elementy ... -->
</div>

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 kolumny, 5 linii pionowych */
  grid-template-rows: repeat(3, 100px); /* 3 wiersze, 4 linie poziome */
  gap: 10px;
  border: 1px solid black;
}

.item {
  background-color: lightblue;
  border: 1px solid navy;
}

.item-1 {
  background-color: lightcoral;
  /* Zaczyna się na 2. linii pionowej, kończy na 4. linii pionowej */
  grid-column-start: 2;
  grid-column-end: 4; /* Zajmuje kolumny 2 i 3 */

  /* Zaczyna się na 1. linii poziomej, kończy na 3. linii poziomej */
  grid-row-start: 1;
  grid-row-end: 3; /* Zajmuje wiersze 1 i 2 */
}

.item-2 {
  background-color: lightgreen;
  /* Zaczyna się na 1. linii pionowej, kończy na 2. linii pionowej */
  grid-column-start: 1;
  grid-column-end: 2; /* Zajmuje kolumnę 1 */

  /* Zaczyna się na 3. linii poziomej, kończy na 4. linii poziomej */
  grid-row-start: 3;
  grid-row-end: 4; /* Zajmuje wiersz 3 */
}

Wizualizacja (siatka 4x3):

Element 1 rozciąga się od linii pionowej 2 do 4 i od linii poziomej 1 do 3. Element 2 zajmuje komórkę między liniami pionowymi 1 i 2 oraz poziomymi 3 i 4.

Ujemne numery linii

Można również używać ujemnych numerów linii, które są liczone od końca siatki. Linia -1 to ostatnia linia siatki, -2 to przedostatnia, itd.

.item-3 {
  /* Zaczyna się na przedostatniej linii pionowej (-2) */
  /* Kończy na ostatniej linii pionowej (-1) */
  grid-column-start: -2;
  grid-column-end: -1; /* Zajmuje ostatnią kolumnę */

  /* Zaczyna się na pierwszej linii poziomej (1) */
  /* Kończy na ostatniej linii poziomej (-1) */
  grid-row-start: 1;
  grid-row-end: -1; /* Zajmuje wszystkie wiersze */
}

Używanie ujemnych indeksów jest przydatne, gdy chcesz umieścić element względem końca siatki, nie znając dokładnej liczby kolumn lub wierszy.

Słowo kluczowe span

Zamiast podawać linię końcową, można użyć słowa kluczowego span, aby określić, ile kolumn lub wierszy ma zajmować element, licząc od linii startowej.

.item-4 {
  grid-column-start: 2;
  grid-column-end: span 2; /* Zajmij 2 kolumny, zaczynając od linii 2 (czyli kolumny 2 i 3) */

  grid-row-start: 1;
  grid-row-end: span 1; /* Zajmij 1 wiersz, zaczynając od linii 1 (czyli wiersz 1) */
}

/* Można też użyć span z linią startową */
.item-5 {
  grid-column-start: span 3; /* Zajmij 3 kolumny, domyślna linia startowa to 1 */
  grid-row-start: 3; /* Zacznij w 3 wierszu */
  grid-row-end: span 1; /* Zajmij 1 wiersz */
}

Składnia grid-column-end: 4; jest równoważna grid-column-end: span 2;, jeśli grid-column-start: 2;.

Użycie span jest często bardziej intuicyjne, gdy myślimy o tym, "ile" komórek ma zająć element, a nie "do której linii" ma się rozciągać.

Jeśli nie podasz wartości dla grid-column-end lub grid-row-end, domyślnie przyjmują one wartość span 1.

.item-6 {
  grid-column-start: 1; /* Równoważne: grid-column: 1 / span 1; */
  grid-row-start: 2;    /* Równoważne: grid-row: 2 / span 1; */
}