Kurs HTML

13.10. Właściwość grid-area (skrót do umieszczania)

Strona główna > Kurs CSS > Rozdział 13: Grid Layout > Właściwość grid-area (skrót do umieszczania)

Dwa znaczenia grid-area

Właściwość grid-area w CSS Grid Layout ma **dwa główne zastosowania**, co może być początkowo mylące:

  1. Przypisanie elementu do nazwanego obszaru: Jak widzieliśmy w lekcji o grid-template-areas, grid-area służy do przypisania elementu Grid do konkretnego obszaru zdefiniowanego w mapie siatki (np. grid-area: header;).
  2. Skrót do umieszczania za pomocą linii: grid-area może również działać jako skrót dla czterech właściwości umieszczania opartych na liniach: grid-row-start, grid-column-start, grid-row-end i grid-column-end.

W tej lekcji skupimy się na **drugim zastosowaniu** - użyciu grid-area jako skrótu do definiowania położenia elementu za pomocą linii siatki.

Właściwość grid-area w tym kontekście stosuje się do **elementu Grid**.

Składnia grid-area jako skrótu

Gdy używamy grid-area jako skrótu do umieszczania za pomocą linii, przyjmuje ona cztery wartości oddzielone ukośnikami (/), reprezentujące kolejno:

grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
  • <row-start>: Wartość dla grid-row-start (numer linii, nazwa linii, span).
  • <column-start>: Wartość dla grid-column-start (numer linii, nazwa linii, span).
  • <row-end>: Wartość dla grid-row-end (numer linii, nazwa linii, span).
  • <column-end>: Wartość dla grid-column-end (numer linii, nazwa linii, span).

Przykład:

.item {
  /* Równoważne: */
  /* grid-row-start: 2; */
  /* grid-column-start: 1; */
  /* grid-row-end: 4; */
  /* grid-column-end: 3; */

  grid-area: 2 / 1 / 4 / 3; 
}

.item-named {
  /* Użycie nazwanych linii */
  grid-area: main-start / content-start / main-end / content-end;
}

.item-span {
  /* Użycie span */
  grid-area: 1 / 2 / span 2 / span 3; /* Zacznij w [1,2], zajmij 2 wiersze i 3 kolumny */
}

Ten skrót pozwala zdefiniować cały obszar zajmowany przez element w jednej linijce kodu, co może być bardzo wygodne.

Kiedy używać którego znaczenia grid-area?

Przeglądarka rozróżnia oba zastosowania grid-area na podstawie podanej wartości:

  • Jeśli wartość jest **pojedynczym słowem** (identyfikatorem, np. header), które pasuje do nazwy obszaru zdefiniowanego w grid-template-areas, przeglądarka traktuje to jako przypisanie do nazwanego obszaru.
  • Jeśli wartość zawiera **ukośnik (/)**, przeglądarka traktuje to jako skrót do umieszczania za pomocą linii.

Dlatego ważne jest, aby nazwy obszarów w grid-template-areas nie zawierały ukośników.

Pomijanie wartości

Można pominąć niektóre wartości w skrócie grid-area, jeśli nie są potrzebne lub mają przyjąć wartości domyślne. Jednak składnia staje się wtedy mniej oczywista i generalnie rzadziej stosowana niż pełny zapis z czterema wartościami lub użycie skrótów grid-column i grid-row.

  • grid-area: <row-start>; - Ustawia tylko grid-row-start.
  • grid-area: <row-start> / <column-start>; - Ustawia grid-row-start i grid-column-start.
  • grid-area: <row-start> / <column-start> / <row-end>; - Ustawia grid-row-start, grid-column-start i grid-row-end.

Ze względu na potencjalną niejednoznaczność i mniejszą czytelność, zaleca się używanie pełnego skrótu z czterema wartościami lub dedykowanych skrótów grid-column i grid-row, jeśli nie potrzebujemy ustawiać wszystkich czterech linii naraz.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz siatkę 3x3. Użyj skrótu grid-area, aby umieścić element tak, by zaczynał się w drugim wierszu i pierwszej kolumnie, a kończył przed trzecim wierszem i trzecią kolumną (czyli zajmował komórki [2,1] i [2,2]).

Rozwiązanie:

HTML:

<div class="container-task1">
  <div class="item">Element</div>
</div>

CSS:

.container-task1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 60px);
  gap: 5px;
  border: 1px solid black;
}

.item {
  background-color: lightcoral;
  border: 1px solid darkred;
  /* row-start / column-start / row-end / column-end */
  grid-area: 2 / 1 / 3 / 3; 
}

Efekt: Element zajmie pierwsze dwie komórki w drugim wierszu siatki.

Zadanie 2 (do samodzielnego wykonania)

Stwórz siatkę 4x4. Użyj skrótu grid-area i słowa kluczowego span, aby element zaczynał się w komórce [2,2] i zajmował 2 wiersze oraz 2 kolumny.

Zadanie 3 (do samodzielnego wykonania)

Stwórz siatkę 3x3 z nazwanymi liniami: col-1, col-2, col-3, col-4 i row-1, row-2, row-3, row-4. Użyj skrótu grid-area i nazwanych linii, aby umieścić element w obszarze od row-1 / col-2 do row-3 / col-4.

FAQ - Najczęściej zadawane pytania

Czy grid-area jest często używane jako skrót do umieszczania liniowego?

Jest to mniej popularne niż używanie grid-area do przypisywania nazwanych obszarów lub używanie dedykowanych skrótów grid-column i grid-row. Jednak może być użyteczne, gdy chcemy zdefiniować wszystkie cztery linie graniczne elementu w jednym miejscu dla zwięzłości.

Czy kolejność wartości w grid-area jest ważna?

Tak, kolejność jest ściśle określona: row-start / column-start / row-end / column-end. Pomylenie kolejności doprowadzi do nieprawidłowego umieszczenia elementu.

Czy mogę użyć auto w skrócie grid-area?

Tak, słowo kluczowe auto może być użyte dla dowolnej z czterech wartości, wskazując, że przeglądarka powinna automatycznie określić tę linię (co zazwyczaj oznacza rozpiętość jednej ścieżki, jeśli jest to linia końcowa, lub automatyczne umieszczenie, jeśli jest to linia startowa).

Co jest bardziej czytelne: grid-area czy grid-column/grid-row?

To kwestia preferencji. Dla niektórych pełny skrót grid-area jest bardziej zwięzły. Dla innych, rozdzielenie definicji kolumn (grid-column) i wierszy (grid-row) jest bardziej przejrzyste i łatwiejsze do zrozumienia na pierwszy rzut oka.