CSS Grid a Flexbox: moderní layout bez frameworku

Floaty, clearfixy a tabulkové hacky patří do muzea. Moderní CSS má dva nástroje, které pokryjí prakticky každý layout: Flexbox pro uspořádání v jedné ose a Grid pro dvourozměrnou mřížku. Ukážeme si, kdy sáhnout po kterém, a projdeme vzory, které můžete rovnou zkopírovat.

Základní pravidlo: jedna osa, nebo dvě?

Situace	Nástroj
Položky v řádku (menu, tlačítka, ikona + text)	Flexbox
Rozložení celé stránky (hlavička, sidebar, obsah, patička)	Grid
Mřížka karet se stejnou šířkou sloupců	Grid
Prvky s proměnlivou šířkou, které se mají zalamovat	Flexbox s flex-wrap
Zarovnání jednoho prvku na střed	obojí (Grid je kratší)

Flexbox se řídí obsahem – položky se roztahují podle toho, co v nich je. Grid se řídí mřížkou – nejdřív definujete stopy (sloupce a řádky) a obsah do nich umístíte.

Flexbox: navigační lišta

.nav {
  display: flex;
  align-items: center;      /* svislé zarovnání */
  gap: 1rem;                /* mezery mezi položkami */
}

.nav .logo {
  margin-right: auto;       /* odtlačí zbytek doprava */
}

Trik s margin-right: auto je jeden z nejužitečnějších ve Flexboxu: automatický okraj spotřebuje všechno volné místo, takže logo zůstane vlevo a odkazy se přesunou doprava. Žádné justify-content: space-between s prázdnými divy.

Vlastnost flex a její zkratka

flex: 1 je zkratka pro flex-grow: 1; flex-shrink: 1; flex-basis: 0%. Položky se tedy rozdělí o místo rovnoměrně bez ohledu na obsah. Pokud chcete, aby se respektovala přirozená šířka obsahu, použijte flex: auto (flex-basis: auto).

.toolbar input { flex: 1; }      /* vstup zabere zbytek místa */
.toolbar button { flex: none; }  /* tlačítko se nesmršťuje */

Častá past: dlouhé slovo nebo URL uvnitř flex položky přeteče kontejner. Flex položky mají výchozí min-width: auto, takže se nesmrští pod šířku obsahu. Řešení je min-width: 0 na položce.

Grid: responzivní mřížka karet bez media queries

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}

Tenhle jediný řádek zařídí, že se vejde tolik sloupců, kolik jich má aspoň 260 px, a zbylé místo se rozdělí rovnoměrně. Na mobilu vznikne jeden sloupec, na širokém monitoru čtyři.

Rozdíl mezi auto-fill a auto-fit: když je položek málo, auto-fill ponechá prázdné sloupce, kdežto auto-fit je sbalí a existující karty roztáhne přes celou šířku. Pro katalog produktů bývá lepší auto-fill, aby jedna karta nebyla přes celou obrazovku.

Grid: layout celé stránky pomocí oblastí

.page {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

header  { grid-area: header; }
aside   { grid-area: sidebar; }
main    { grid-area: main; }
footer  { grid-area: footer; }

@media (max-width: 768px) {
  .page {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

Pojmenované oblasti jsou čitelné i po půl roce a přeskládání pro mobil je otázka změny pár řádků. Jednotka dvh (dynamic viewport height) řeší problém mobilních prohlížečů, kde 100vh nepočítá s vysouvací adresní lištou.

Pozor: vizuální přeskládání pomocí Gridu nemění pořadí v DOM. Čtečky obrazovky i klávesnice jdou podle zdrojového HTML, takže logické pořadí obsahu držte v markupu.

Centrování na dva řádky

.center {
  display: grid;
  place-items: center;
}

place-items je zkratka pro align-items a justify-items. Funguje pro jeden i více potomků.

Subgrid: zarovnané karty

Klasický problém: karty v řadě mají různě dlouhé nadpisy a tlačítka „Koupit” pak nejsou ve stejné výšce. Řeší to subgrid, který je podporovaný ve všech hlavních prohlížečích od roku 2023.

.cards { display: grid; grid-template-columns: repeat(3, 1fr); }

.card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;  /* řádky převezme od rodiče */
}

Karta se roztáhne přes tři řádky rodičovské mřížky (nadpis, text, tlačítko) a tyto řádky sdílí se sousedy, takže se zarovnají napříč kartami.

Jak layout ladit

V Chrome i Firefoxu otevřete DevTools, v panelu Elements najdete u prvků s display: grid nebo flex malý štítek grid / flex. Kliknutím zapnete překryv, který ukáže stopy, čísla linií, mezery i názvy oblastí. Je to nejrychlejší způsob, jak zjistit, proč prvek skončil jinde, než čekáte.

Nejčastější chyby

• gap místo marginů – margin na posledním prvku pak nemusíte rušit přes :last-child.
• Pevné výšky – nechte výšku určit obsah, použijte min-height.
• Vnořování Flexboxu do nekonečna – když skládáte řádky a sloupce zároveň, je to práce pro Grid.
• Zapomenuté min-width: 0 u flex položek s dlouhým textem nebo <pre>.

Pokud vám layout nesedí a nevíte proč, vložte HTML a CSS do ColdHost AI v režimu Programování a popište, co vidíte a co chcete – typicky dostanete konkrétní opravu i vysvětlení, která vlastnost se chovala jinak, než jste čekali.