Kurs HTML

Wprowadzenie: Zwięzłe definiowanie położenia

W poprzedniej lekcji nauczyliśmy się używać właściwości grid-column-start, grid-column-end, grid-row-start i grid-row-end do precyzyjnego umieszczania elementów w siatce za pomocą numerów linii.

CSS Grid Layout oferuje również dwie **skrócone właściwości (shorthands)**, które pozwalają zdefiniować zarówno linię startową, jak i końcową dla kolumn lub wierszy w jednej deklaracji:

• grid-column: Skrót dla grid-column-start i grid-column-end.
• grid-row: Skrót dla grid-row-start i grid-row-end.

Używanie tych skrótów sprawia, że kod CSS jest bardziej zwięzły i często łatwiejszy do odczytania. Stosuje się je do **elementu Grid**.

Składnia grid-column i grid-row

Obie właściwości przyjmują jedną lub dwie wartości oddzielone ukośnikiem (/).

grid-column: <start-line> [ / <end-line> ]?;
grid-row: <start-line> [ / <end-line> ]?;Kopiuj

• <start-line>: Wartość dla grid-column-start lub grid-row-start. Może to być numer linii, nazwa linii (omówimy później) lub słowo kluczowe span.
• <end-line> (opcjonalna): Wartość dla grid-column-end lub grid-row-end. Może to być numer linii, nazwa linii lub słowo kluczowe span wraz z liczbą.

Interpretacja:

• Jedna wartość: Jeśli podasz tylko jedną wartość (np. grid-column: 2;), ustawia ona tylko linię startową (grid-column-start: 2;). Linia końcowa przyjmuje domyślną wartość auto, co zazwyczaj oznacza rozpiętość jednej ścieżki (span 1).
• Dwie wartości oddzielone ukośnikiem: Jeśli podasz dwie wartości (np. grid-column: 2 / 4;), pierwsza ustawia linię startową (grid-column-start: 2;), a druga linię końcową (grid-column-end: 4;).
• Użycie span: Można używać span zarówno dla linii startowej (choć rzadziej), jak i końcowej.
  • grid-column: span 2; jest równoważne grid-column-start: auto; grid-column-end: span 2; (zajmij 2 kolumny, zaczynając od automatycznie znalezionej pozycji).
  • grid-column: 2 / span 3; jest równoważne grid-column-start: 2; grid-column-end: span 3; (zacznij od linii 2, zajmij 3 kolumny).

Przykłady użycia skrótów

Rozważmy siatkę 4x3 z poprzedniej lekcji.

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

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

/* Poprzednio: */
/* .item-1 { */
/*   grid-column-start: 2; */
/*   grid-column-end: 4; */
/*   grid-row-start: 1; */
/*   grid-row-end: 3; */
/* } */

/* Używając skrótów: */
.item-1 {
  background-color: lightcoral;
  grid-column: 2 / 4; /* Zacznij na linii 2, zakończ na linii 4 */
  grid-row: 1 / 3;    /* Zacznij na linii 1, zakończ na linii 3 */
}

/* Poprzednio: */
/* .item-2 { */
/*   grid-column-start: 1; */
/*   grid-column-end: 2; */
/*   grid-row-start: 3; */
/*   grid-row-end: 4; */
/* } */

/* Używając skrótów: */
.item-2 {
  background-color: lightgreen;
  grid-column: 1 / 2; /* Linia 1 do 2 */
  grid-row: 3 / 4;    /* Linia 3 do 4 */
}

/* Używając span w skrócie */
.item-3 {
  background-color: lightyellow;
  grid-column: 1 / span 2; /* Zacznij na linii 1, zajmij 2 kolumny */
  grid-row: 2 / span 1;    /* Zacznij na linii 2, zajmij 1 wiersz */
}

/* Tylko linia startowa (domyślnie span 1) */
.item-4 {
  background-color: pink;
  grid-column: 4; /* Równoważne grid-column: 4 / span 1; */
  grid-row: 3;    /* Równoważne grid-row: 3 / span 1; */
}
Kopiuj

Jak widać, kod staje się znacznie krótszy i potencjalnie bardziej czytelny, gdy używamy skrótów grid-column i grid-row.