Grid w HTML to potocznie używane określenie na układ siatki tworzony za pomocą CSS Grid (nie jest to znacznik HTML, lecz zestaw właściwości CSS). Służy do budowania dwuwymiarowych układów stron – wiersze i kolumny – z precyzyjnym pozycjonowaniem, wyrównaniem i skalowaniem elementów, także responsywnie.
Co można „załatwić” z użyciem CSS Grid:
- Tworzenie siatek z wierszami i kolumnami, stałymi lub elastycznymi (px, %, jednostka fr).
- Dokładne rozmieszczanie elementów po liniach, nazwanych obszarach lub numerach (grid-area, grid-row, grid-column).
- Responsywność bez skomplikowanych media queries dzięki fr, minmax(), auto-fit/auto-fill i gap.
- Kontrola wyrównania elementów i całej siatki (np. align-items, justify-items, place-items).
- Przeplatanie/warstwowanie elementów w tej samej komórce (z-index).
- Szybkie tworzenie klasycznych layoutów (nagłówek, nawigacja, główna kolumna, sidebar, stopka) oraz układów 12-kolumnowych.
Podstawowe właściwości, od których zacząć:
- display: grid lub display: inline-grid
- grid-template-columns, grid-template-rows, grid-template-areas
- gap (przerwy), grid-column, grid-row do pozycjonowania
- Funkcje: minmax(), repeat(), auto-fit, auto-fill, jednostka fr
Krótki przykład (schematycznie):
- Kontener: display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem;
- Element: grid-column: 1 / span 6; grid-row: 1 / 2;
Daje to elastyczny układ kolumnowy, łatwy do skalowania na różnych szerokościach.
Alternatywy i kiedy ich używać:
- Flexbox: lepszy do jednowymiarowych układów w wierszu lub kolumnie; Grid: do układów dwuwymiarowych (wiersze+kolumny).
- Frameworki (np. „12-column grid”): można odtworzyć w czystym CSS Grid bez zależności.
Inne formy kontaktu / źródła wiedzy:
- Dokumentacja MDN (opis CSS Grid, przykłady, właściwości): developer.mozilla.org/en-US/docs/Web/CSS/CSSgridlayout
- MDN – wprowadzenie do koncepcji: developer.mozilla.org/en-US/docs/Web/CSS/CSSgridlayout/Basicconceptsofgridlayout
- Artykuł po polsku z przykładami responsywności: semcore.pl/css-grid-czyli-responsywne-uklady-stron-internetowych/
- Przewodnik Chrome Developers (po polsku, z klasycznym układem 12 kolumn): developer.chrome.com/docs/css-ui/css-grid?hl=pl
Uwaga na nazewnictwo:
- „Grid w HTML” to skrót myślowy – faktycznie chodzi o CSS Grid, używany razem z HTML do układania elementów na stronie.
