Čo je CSS Grid?

CSS Grid Layout (alebo jednoducho CSS Grid) je dvojrozmerný systém rozloženia v CSS. Umožňuje riadiť umiestnenie prvkov ako po riadkoch (horizontálne), tak aj po stĺpcoch (vertikálne), čím vytvára zložité mriežkové štruktúry pre tvorbu rozhraní.

Hlavné koncepty CSS Grid zahŕňajú:

• Grid Container: Element, na ktorý sa aplikuje vlastnosť display: grid alebo display: inline-grid. Potomky tohto prvku sa stávajú Grid Items.
• Grid Items: Priame potomky Grid Containeru.
• Grid Lines: Deliace čiary, ktoré tvoria mriežku. Môžu byť pomenované alebo mať číselný index.
• Grid Tracks: Priestor medzi dvoma čiarami mriežky — to je buď stĺpec, alebo riadok.
• Grid Cells: Najmenšia jednotka mriežky, vytvorená pretínaním riadku a stĺpca.
• Grid Areas: Obdĺžniková oblasť mriežky, ktorá zaberá jeden alebo viac buniek.

Kľúčové vlastnosti pre prácu s CSS Grid zahŕňajú:

Pre kontajner:

• display: grid | inline-grid;
• grid-template-columns: Určuje stĺpce mriežky.
• grid-template-rows: Určuje riadky mriežky.
• grid-template-areas: Určuje pomenované oblasti mriežky.
• gap | row-gap | column-gap: Určuje medzery medzi bunkami.
• justify-items | align-items | place-items: Zarovnanie obsahu vnútri buniek pozdĺž hlavnej a priečnej osi.
• justify-content | align-content | place-content: Zarovnanie dráh mriežky v rámci kontajnera.

Pre prvky (Grid Items):

• grid-column-start | grid-column-end | grid-column: Určuje, ktoré línie stĺpcov zaberá prvok.
• grid-row-start | grid-row-end | grid-row: Určuje, ktoré línie riadkov zaberá prvok.
• grid-area: Priraďuje prvku pomenovanú oblasť mriežky alebo určuje jeho polohu pomocou línií.
• justify-self | align-self | place-self: Zarovnanie samotného prvku vnútri jeho bunky.

CSS Grid poskytuje mocné nástroje na tvorbu adaptívnych a zložitých rozložení, čo značne zjednodušuje úlohy, ktoré predtým vyžadovali použitie float, inline-block alebo absolútneho pozicovania.

.container {
  display: grid; /* Robíme prvok Grid kontajnerom */
  grid-template-columns: 1fr 1fr 1fr; /* Vytvárame 3 stĺpce rovnakej šírky */
  grid-template-rows: auto auto; /* Vytvárame 2 riadky s automatickou výškou */
  gap: 10px; /* Pridávame medzery medzi bunkami */
}

.item {
  /* Prvky vnútri kontajnera sa automaticky stávajú Grid Items */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* Prvý prvok zaberá stĺpce od 1 do 3 */
}