CSS Grid Layout: dvourozměrné layouty konečně nativně

CSS Grid Layout specifikace dozrává a první prohlížeče implementují podporu. Konec hacků s floaty a flexboxem pro komplexní layouty — průvodce CSS Grid.

Od tabulek přes floaty ke gridu¶

Historie CSS layoutu je historie hacků. Tabulkové layouty v 90. letech, float-based layouty v 2000s, flexbox pro jednorozměrné layouty. CSS Grid konečně přináší nativní dvourozměrný layout systém.

Flexbox řeší řádek nebo sloupec. Grid řeší řádky A sloupce současně. Konečně můžeme vytvářet komplexní layouty bez pozicovacích triků.

Základy CSS Grid¶

Grid definujete na kontejneru:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-gap: 20px;
  min-height: 100vh;
}

.header  { grid-column: 1 / -1; }
.sidebar { grid-column: 1; }
.main    { grid-column: 2; }
.aside   { grid-column: 3; }
.footer  { grid-column: 1 / -1; }

fr jednotka (fraction) distribuuje volný prostor. grid-template-areas umožňuje pojmenované oblasti pro ještě čitelnější kód.

Grid template areas¶

Pojmenované oblasti jsou nejvíce intuitivní způsob definice layoutu:

.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.nav    { grid-area: nav; }
.main   { grid-area: main; }
.aside  { grid-area: aside; }
.footer { grid-area: footer; }

Pro responsive design stačí předefinovat grid-template-areas v media query — kompletní layout změna bez úprav HTML.

Podpora a adopce¶

CSS Grid je zatím v implementační fázi:

• Chrome/Firefox** — za vlajkou (flag), plná podpora se očekává v 2017
• Edge** — starší specifikace s -ms- prefixem
• Safari** — v přípravě

Pro produkci je zatím brzy, ale experimentujte a připravujte se. Grid a Flexbox se vzájemně doplňují — Grid pro page layout, Flexbox pro komponentové layouty.

Závěr: revoluce CSS layoutu¶

CSS Grid je největší posun v CSS layoutu za posledních 20 let. Až bude plně podporovaný, eliminuje potřebu CSS frameworků jako Bootstrap pro grid systémy. Začněte experimentovat dnes, abyste byli připraveni na zítřek.