Kurs HTML

Niejawna siatka (Implicit Grid)

Gdy definiujemy siatkę za pomocą grid-template-columns i grid-template-rows, tworzymy tzw. **jawną siatkę (explicit grid)**.

Jednak co się dzieje, gdy:

• Mamy więcej elementów niż komórek w jawnej siatce?
• Jawnie umieścimy element poza granicami jawnej siatki (np. grid-column: 5; w siatce 4-kolumnowej)?

W takich sytuacjach Grid automatycznie tworzy dodatkowe linie i ścieżki (kolumny lub wiersze), aby pomieścić te elementy. Te automatycznie utworzone ścieżki tworzą **niejawną siatkę (implicit grid)**.

Domyślnie, rozmiar tych niejawnych ścieżek jest ustawiany na auto, co oznacza, że dopasowują się one do zawartości umieszczonych w nich elementów.

Właściwości grid-auto-columns i grid-auto-rows pozwalają nam **kontrolować rozmiar** tych automatycznie tworzonych, niejawnych ścieżek. Stosuje się je do **kontenera Grid**.

grid-auto-columns

Definiuje rozmiar **niejawnie tworzonych kolumn** (czyli kolumn dodawanych automatycznie, gdy elementy wykraczają poza jawnie zdefiniowane kolumny, np. przy grid-auto-flow: column lub umieszczaniu elementu w nieistniejącej kolumnie).

Przyjmuje takie same wartości jak pojedyncza ścieżka w grid-template-columns (np. px, %, fr, auto, minmax()).

Wartość domyślna: auto.

.container {
  display: grid;
  grid-template-columns: 100px 100px; /* Jawna siatka: 2 kolumny */
  grid-template-rows: 50px 50px;
  grid-auto-flow: row; /* Wypełniaj wierszami */
  gap: 5px;

  /* Jeśli element zostanie umieszczony w 3. lub dalszej kolumnie, */
  /* ta kolumna będzie miała 80px szerokości. */
  grid-auto-columns: 80px; 
}

.item-placed-outside {
  grid-column: 4; /* Umieszczenie w niejawnej, 4. kolumnie */
  grid-row: 1;
}
Kopiuj

W tym przykładzie, jawna siatka ma 2 kolumny po 100px. Jeśli umieścimy element w 4. kolumnie, Grid utworzy niejawnie kolumnę 3 i 4. Dzięki grid-auto-columns: 80px;, obie te niejawne kolumny (3 i 4) będą miały szerokość 80px.

grid-auto-rows

Definiuje rozmiar **niejawnie tworzonych wierszy** (czyli wierszy dodawanych automatycznie, gdy elementy wykraczają poza jawnie zdefiniowane wiersze, np. przy domyślnym grid-auto-flow: row i większej liczbie elementów niż komórek).

Przyjmuje takie same wartości jak pojedyncza ścieżka w grid-template-rows.

Wartość domyślna: auto.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px; /* Jawna siatka: 1 wiersz */
  grid-auto-flow: row; /* Wypełniaj wierszami (domyślnie) */
  gap: 10px;

  /* Wiersze tworzone automatycznie (drugi, trzeci, itd.) */
  /* będą miały wysokość 60px. */
  grid-auto-rows: 60px; 
}

/* Jeśli dodamy np. 5 elementów, pierwsze 3 wypełnią jawny wiersz 1. */
/* Elementy 4 i 5 utworzą niejawny wiersz 2, który będzie miał 60px wysokości. */
Kopiuj

W tym przykładzie, jawna siatka ma tylko jeden wiersz o wysokości 100px. Gdy elementy zaczną wypełniać drugi, trzeci i kolejne wiersze (niejawne), każdy z tych nowych wierszy będzie miał wysokość 60px dzięki grid-auto-rows: 60px;.

Kiedy są używane?

• grid-auto-columns jest istotne głównie wtedy, gdy:
  • Używasz grid-auto-flow: column.
  • Jawnie umieszczasz element w kolumnie poza jawną siatką.
• grid-auto-rows jest istotne głównie wtedy, gdy:
  • Używasz domyślnego grid-auto-flow: row i masz więcej elementów niż komórek w jawnych wierszach.
  • Jawnie umieszczasz element w wierszu poza jawną siatką.