Co je to CSS Grid?

CSS Grid Layout (nebo prostě CSS Grid) je dvourozměrný systém rozložení v CSS. Umožňuje řídit umístění prvků jak podél řádků (vodorovně), tak podél sloupců (svisle), čímž vytváří složité mřížkové struktury pro tvorbu rozhraní.

Hlavní koncepty CSS Grid zahrnují:

• Mřížkový kontejner: Prvek, na který se aplikuje vlastnost display: grid nebo display: inline-grid. Potomci tohoto prvku se stávají prvky mřížky.
• Prvky mřížky: Přímí potomci mřížkového kontejneru.
• Mřížkové čáry: Čáry oddělující mřížku. Mohou být pojmenované nebo mít číselný index.
• Mřížkové pásy: Prostor mezi dvěma čarami mřížky — může to být sloupec nebo řádek.
• Mřížkové buňky: Nejmenší jednotka mřížky, tvořená průnikem řádku a sloupce.
• Mřížkové oblasti: Obdélníková oblast mřížky, která zabírá jeden nebo více buněk.

Klíčové vlastnosti pro práci s CSS Grid zahrnují:

Pro kontejner:

• display: grid | inline-grid;
• grid-template-columns: Určuje sloupce mřížky.
• grid-template-rows: Určuje řádky mřížky.
• grid-template-areas: Určuje pojmenované oblasti mřížky.
• gap | row-gap | column-gap: Určuje mezery mezi buňkami.
• justify-items | align-items | place-items: Zarovnání obsahu uvnitř buněk podél hlavních a příčných os.
• justify-content | align-content | place-content: Zarovnání pásů mřížky uvnitř kontejneru.

Pro prvky (Prvky mřížky):

• grid-column-start | grid-column-end | grid-column: Určuje, které sloupce zabírá prvek.
• grid-row-start | grid-row-end | grid-row: Určuje, které řádky zabírá prvek.
• grid-area: Přiřazuje prvku pojmenovanou oblast mřížky nebo určuje jeho pozici pomocí čar.
• justify-self | align-self | place-self: Zarovnání prvku uvnitř jeho buňky.

CSS Grid poskytuje mocné nástroje pro tvorbu responzivních a složitých rozložení, což výrazně zjednodušuje úkoly, které dříve vyžadovaly použití float, inline-block nebo absolutního pozicování.

.container {
  display: grid; /* Přeměňuje prvek na kontejner mřížky */
  grid-template-columns: 1fr 1fr 1fr; /* Vytváří 3 sloupce stejné šířky */
  grid-template-rows: auto auto; /* Vytváří 2 řádky s automatickou výškou */
  gap: 10px; /* Přidává mezery mezi buňkami */
}

.item {
  /* Elementy uvnitř kontejneru se automaticky stávají prvky mřížky */
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.item:nth-child(1) {
  grid-column: 1 / 3; /* První prvek zabírá sloupce od 1 do 3 */
}