CSS Grid Layout je dvourozměrný layoutový systém pro Webové stránky, který umožňuje tvorbu komplexních layoutů s čistým a přehledným kódem. Tento systém je ideální pro designy, které vyžadují více sloupců a řádků, a poskytuje vývojářům kontrolu nad rozložením obsahu na stránce. CSS Grid je integrovaný přímo do CSS a je podporován všemi moderními prohlížeči.

Základy CSS Grid

Než začnete s CSS Grid, je důležité pochopit několik klíčových konceptů:

• Grid Container: Element, na kterém aplikujete display: grid;, se stává grid kontejnerem. Všechny jeho přímé potomky můžete uspořádat do mřížkového layoutu.
• Grid Item: Přímí potomci grid kontejneru, které jsou umístěny do mřížky.
• Grid Track: Společný název pro sloupce (grid-column) a řádky (grid-row) v mřížkovém systému.
• Grid Cell: Jednotlivá buňka v mřížce, která je definována průsečíkem sloupce a řádku.
• Grid Area: Oblast v mřížce, která je definována čtyřmi hranicemi a může obsahovat jednu nebo více buněk.

Vytvoření základního mřížkového systému

1. Definování grid kontejneru

   Aby bylo možné využít CSS Grid, musíte nejprve určit kontejner, který bude sloužit jako mřížka. Toho dosáhnete přidáním display: grid; k vašemu kontejneru v CSS.

   .grid-container {
     display: grid;
   }
   

2. Nastavení sloupců a řádků

   S CSS Grid můžete snadno definovat velikost a počet sloupců a řádků pomocí vlastností grid-template-columns a grid-template-rows.

   .grid-container {
     display: grid;
     grid-template-columns: auto auto auto;
     grid-template-rows: 100px 200px;
   }
   

   Tento kód vytvoří mřížku s třemi sloupci stejné šířky a dvěma řádky s výškami 100px a 200px.

3. Umístění prvků v mřížce

   Prvky můžete v mřížce umístit explicitně pomocí grid-column a grid-row vlastností nebo je nechat automaticky rozmístit.

   .grid-item {
     grid-column: 2 / span 2;
     grid-row: 1;
   }
   

Pokročilé techniky a vlastnosti CSS Grid

CSS Grid nabízí řadu pokročilých možností, jako jsou:

• Frakční jednotky (fr): Umožňují flexibilní rozdělení prostoru v mřížce.
• Grid Gap: Vytváří mezery mezi sloupci a řádky.
• Minmax() funkce: Umožňuje nastavit minimální a maximální velikost sloupců a řádků.
• Auto-fill a auto-fit: Pomáhají automaticky umisťovat a velikostní upravovat prvky v mřížce.

CSS Grid je mocný nástroj pro tvorbu webových layoutů, který vývojářům nabízí rozsáhlé možnosti pro kontrolu nad rozložením stránky. Jeho pochopení a efektivní využití může výrazně zlepšit design a uživatelskou přívětivost webových aplikací. Praktické experimentování s různými vlastnostmi a hodnotami vám pomůže lépe pochopit, jak CSS Grid funguje a jak jej můžete využít ve vašich projektech.