Kurs HTML

Czym jest CSS Grid Layout?

CSS Grid Layout (często nazywany po prostu "Grid") to system układu w CSS zaprojektowany do tworzenia **dwuwymiarowych** layoutów stron internetowych. W przeciwieństwie do Flexboxa, który jest głównie jednowymiarowy (koncentruje się na wierszach lub kolumnach), Grid pozwala na jednoczesne zarządzanie układem zarówno w poziomie (kolumny), jak i w pionie (wiersze).

Grid umożliwia tworzenie złożonych, responsywnych siatek, w których można precyzyjnie rozmieszczać elementy, definiować odstępy i kontrolować wyrównanie. Jest to niezwykle potężne narzędzie do budowania głównych struktur layoutu strony.

Podstawowe koncepcje w Grid Layout to:

• Kontener Grid (Grid Container): Element, na którym aktywowano Grid Layout (za pomocą display: grid lub inline-grid).
• Elementy Grid (Grid Items): Bezpośrednie dzieci kontenera Grid.
• Linie Grid (Grid Lines): Poziome i pionowe linie dzielące siatkę.
• Ścieżki Grid (Grid Tracks): Przestrzeń między dwiema sąsiednimi liniami Grid (kolumna lub wiersz).
• Komórki Grid (Grid Cells): Najmniejsza jednostka siatki, przestrzeń między czterema przecinającymi się liniami Grid.
• Obszary Grid (Grid Areas): Prostokątny obszar obejmujący jedną lub więcej komórek Grid.

Aktywacja Kontekstu Formatowania Grid

Podobnie jak w przypadku Flexboxa, aby zacząć używać Grid Layout, musimy najpierw poinstruować przeglądarkę, że dany element ma stać się **kontenerem Grid**. Robimy to za pomocą właściwości display, nadając jej jedną z dwóch wartości: grid lub inline-grid.

Ustawienie display: grid lub display: inline-grid na elemencie nadrzędnym (kontenerze) powoduje, że jego bezpośrednie dzieci stają się **elementami Grid** i mogą być umieszczane w siatce zdefiniowanej na kontenerze.

display: grid

Ustawienie display: grid sprawia, że element zachowuje się jak **element blokowy** (podobnie jak display: block) w kontekście otaczających go elementów, ale jego wewnętrzny układ (dzieci) jest zarządzany przez Grid Layout.

• Kontener zajmuje całą dostępną szerokość w swoim rodzicu (chyba że ma zdefiniowaną szerokość).
• Następne elementy w przepływie dokumentu pojawią się pod kontenerem Grid.
• Dzieci kontenera (elementy Grid) domyślnie układają się w siatce zgodnie z jej definicją (lub automatycznie, jeśli siatka nie jest zdefiniowana).

<p>Tekst przed kontenerem.</p>
<div class="grid-container-block">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>
<p>Tekst po kontenerze.</p>Kopiuj

.grid-container-block {
  display: grid; /* Zachowuje się jak blok na zewnątrz */
  /* Definicja siatki (np. kolumn) zostanie dodana później */
  grid-template-columns: 100px 100px; /* Przykładowa definicja 2 kolumn */
  border: 2px solid blue;
  padding: 10px;
  margin-bottom: 10px;
}

.grid-item {
  background-color: lightblue;
  padding: 20px;
  border: 1px solid navy;
  text-align: center;
}
Kopiuj

W tym przykładzie, div.grid-container-block zajmie całą dostępną szerokość, a tekst "Tekst po kontenerze." pojawi się pod nim. Elementy 1, 2, 3, 4 ułożą się w zdefiniowanej siatce (tutaj 2x2).

display: inline-grid

Ustawienie display: inline-grid sprawia, że element zachowuje się jak **element liniowo-blokowy** (podobnie jak display: inline-block) w kontekście otaczających go elementów, ale jego wewnętrzny układ (dzieci) jest zarządzany przez Grid Layout.

• Szerokość kontenera dopasowuje się do jego zawartości siatki (chyba że ma zdefiniowaną szerokość).
• Kontener układa się w jednej linii z otaczającymi go elementami (np. tekstem), pozwalając na opływanie.
• Dzieci kontenera (elementy Grid) układają się w siatce.

<p>Tekst przed <span class="grid-container-inline">
  <span class="grid-item">A</span>
  <span class="grid-item">B</span>
  <span class="grid-item">C</span>
  <span class="grid-item">D</span>
</span> tekst po kontenerze.</p>Kopiuj

.grid-container-inline {
  display: inline-grid; /* Zachowuje się jak inline-block na zewnątrz */
  grid-template-columns: auto auto; /* Przykładowa definicja 2 kolumn */
  border: 2px solid green;
  padding: 5px;
  vertical-align: middle; /* Opcjonalnie */
}

/* Style .grid-item jak poprzednio, ale z innym tłem */
.grid-item {
  background-color: lightgreen;
  padding: 10px;
  border: 1px solid darkgreen;
  text-align: center;
}
Kopiuj

W tym przykładzie, span.grid-container-inline będzie miał szerokość dopasowaną do siatki 2x2 i pojawi się w tej samej linii co otaczający go tekst.

Kluczowa różnica: Zachowanie zewnętrzne

Podobnie jak w Flexboxie, podstawowa różnica między display: grid a display: inline-grid leży w tym, jak sam **kontener** jest traktowany w przepływie dokumentu:

• grid: Kontener jest elementem blokowym.
• inline-grid: Kontener jest elementem liniowo-blokowym.

Wybór zależy od tego, czy chcesz, aby kontener zajmował całą linię (grid), czy też ma być częścią linii tekstu lub układać się obok innych elementów liniowych (inline-grid).

Ważne: Niezależnie od tego, czy użyjesz grid czy inline-grid, sposób, w jaki **definiujesz siatkę** i **układasz elementy wewnątrz kontenera** za pomocą właściwości Grid Layout, jest **identyczny**.