Czym jest CSS Grid?

Układ siatki CSS (lub po prostu CSS Grid) to dwuwymiarowy system układu w CSS. Pozwala zarządzać rozmieszczeniem elementów zarówno w wierszach (poziomo), jak i kolumnach (pionowo), tworząc złożone struktury siatki do budowy interfejsów.

Główne koncepcje CSS Grid obejmują:

• Kontener siatki: Element, do którego stosuje się właściwość display: grid lub display: inline-grid. Descendants tego elementu stają się elementami siatki.
• Elementy siatki: Bezpośredni potomkowie kontenera siatki.
• Linie siatki: Linie dzielące tworzące siatkę. Mogą być nazwane lub mieć indeks numeryczny.
• Tory siatki: Przestrzeń między dwoma liniami siatki — jest to kolumna lub wiersz.
• Komórki siatki: Najmniejsza jednostka siatki, utworzona przez przecięcie wiersza i kolumny.
• Obszary siatki: Prostokątne obszary siatki zajmujące jedną lub więcej komórek.

Kluczowe właściwości do pracy z CSS Grid obejmują:

Dla kontenera:

• display: grid | inline-grid;
• grid-template-columns: Definiuje kolumny siatki.
• grid-template-rows: Definiuje wiersze siatki.
• grid-template-areas: Definiuje nazwane obszary siatki.
• gap | row-gap | column-gap: Definiuje odstępy między komórkami.
• justify-items | align-items | place-items: Wyrównanie zawartości wewnątrz komórek wzdłuż głównych i poprzecznych osi.
• justify-content | align-content | place-content: Wyrównanie torów siatki wewnątrz kontenera.

Dla elementów (Elementy siatki):

• grid-column-start | grid-column-end | grid-column: Określa, które linie kolumn zajmuje element.
• grid-row-start | grid-row-end | grid-row: Określa, które linie wierszy zajmuje element.
• grid-area: Przypisuje elementowi nazwany obszar siatki lub określa jego pozycję za pomocą linii.
• justify-self | align-self | place-self: Wyrównanie samego elementu wewnątrz jego komórki.

CSS Grid zapewnia potężne narzędzia do tworzenia responsywnych i złożonych układów, znacznie upraszczając zadania, które wcześniej wymagały użycia float, inline-block lub pozycjonowania absolutnego.

.container {
  display: grid; /* Ustawia element jako kontener siatki */
  grid-template-columns: 1fr 1fr 1fr; /* Tworzy 3 kolumny o równej szerokości */
  grid-template-rows: auto auto; /* Tworzy 2 wiersze o automatycznej wysokości */
  gap: 10px; /* Dodaje odstępy między komórkami */
}

.item {
  /* Elementy wewnątrz kontenera automatycznie stają się elementami siatki */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Pierwszy element zajmuje kolumny od 1 do 3 */
}