CSS Grid —
dvourozměrný layout

Grid vs. Flexbox — kdy co použít?

Obě technologie jsou moderní a plně podporované. Nejsou vzájemně výlučné — v praxi se kombinují.

Základy CSS Grid

Grid se aktivuje na rodiči pomocí display: grid. Pak definujeme sloupce a řádky:

.container {
  display: grid;

  /* Definice sloupců */
  grid-template-columns: 200px 1fr 1fr;
  /* = 3 sloupce: pevný 200px + dva stejně velké */

  /* Definice řádků */
  grid-template-rows: 80px auto 60px;

  /* Mezery */
  gap: 16px;          /* row-gap i column-gap */
  gap: 12px 24px;     /* row-gap column-gap */
  row-gap: 12px;
  column-gap: 24px;
}Kopírovat

Jednotka fr a funkce minmax()

Tyto dvě věci dělají Grid tak silným nástrojem pro responzivní layouty.

Jednotka fr (fraction)

fr rozdělí zbývající prostor v poměrech. Nejdřív se zaberou pevné hodnoty (px, %), pak se zbytek rozdělí zlomky:

/* 3 sloupce: pevný 200px + dvě rovnocenné části zbytku */
grid-template-columns: 200px 1fr 1fr;

/* Poměr 1:2:1 */
grid-template-columns: 1fr 2fr 1fr;

/* Smíchání % a fr */
grid-template-columns: 30% 1fr;Kopírovat

Funkce minmax(min, max)

Definuje rozsah velikosti — sloupec není nikdy menší než min a nikdy větší než max:

/* Sloupec min 150px, max 1fr (roste s prostorem) */
grid-template-columns: repeat(3, minmax(150px, 1fr));

/* Kombinace: fixní sidebar, flexibilní main */
grid-template-columns: minmax(200px, 280px) 1fr;Kopírovat

Funkce repeat() s auto-fill a auto-fit

Zlatý grál responzivních galerii — bez media queries:

/* auto-fill: vyplní co nejvíce sloupců alespoň 200px */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: totéž, ale "zkolabuje" prázdné sloupce */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* ↑ Tento vzor používejte pro responzivní galerie/karty! */Kopírovat

Pojmenované oblasti (grid-template-areas)

Jeden z nejelegantnějších rysů CSS Grid — vizuální "mapa" layoutu přímo v kódu:

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main"
    "footer  footer  footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 60px 1fr 50px;
  gap: 12px;
  height: 100vh;
}

/* Přiřazení prvků do oblastí */
header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

/* Prázdná buňka = tečka */
grid-template-areas:
  "header header"
  ".      main"   /* ← mezera vlevo */
  "footer footer";Kopírovat

Umísťování a roztahování prvků

Bez named areas máme přesnou kontrolu přes čísla linek nebo klíčové slovo span:

/* grid-column: start / end (čísla linek, začínají od 1) */
.item {
  grid-column: 1 / 3;    /* od linky 1 do 3 = zabere 2 sloupce */
  grid-row: 1 / 2;       /* první řádek */
}

/* span: "zabir N buněk" */
.item {
  grid-column: span 2;   /* zabere 2 sloupce (odkud stojí) */
  grid-row: span 3;      /* zabere 3 řádky */
}

/* -1 = poslední linka (konec gridu) */
.full-width {
  grid-column: 1 / -1;  /* od první do poslední linky */
}Kopírovat

Responzivní Grid bez media queries

Kombinace auto-fit + minmax() je tak silná, že mnohdy nepotřebujeme žádné media queries. Pro složitější layouty je přidáme:

/* ✅ Nejlepší vzor pro responzivní karty */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 24px;
}
/* 4 sloupce na desktop, 2 na tablet, 1 na mobil
   — automaticky, bez media queries! */

/* Pro layout stránky — s media queries */
.layout {
  display: grid;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}
@media (min-width: 768px) {
  .layout {
    grid-template-areas:
      "header  header"
      "sidebar main"
      "footer  footer";
    grid-template-columns: 240px 1fr;
  }
}Kopírovat

Praktické cvičení

Vytvořte dashboard layout pomocí named grid areas: nahoře header (celá šířka), vlevo sidebar (220px), vpravo hlavní oblast se 3 statistickými kartami (auto-fit), dole footer (celá šířka).

Taháček — rychlá reference

Grid kontejner

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "a b" "c c";
  gap: 16px;
  /* Zarovnání všech items */
  justify-items: stretch | start | end | center;
  align-items: stretch | start | end | center;
}Kopírovat

Grid items

.item {
  grid-column: 1 / 3;      /* od linky 1 do 3 */
  grid-column: span 2;     /* zabere 2 sloupce */
  grid-column: 1 / -1;     /* celá šířka */
  grid-row: 2 / 4;
  grid-area: header;       /* named area */
  /* Individuální zarovnání */
  justify-self: center;
  align-self: end;
}Kopírovat

Zlaté vzory

/* Responzivní karty bez media queries */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

/* Holy Grail layout */
grid-template-areas:
  "header header header"
  "nav    main   aside"
  "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: 60px 1fr 50px;Kopírovat