Dvourozměrný layout — řady i sloupce zároveň. Nejsilnější nástroj pro stránkový layout, komplexní mřížky a automaticky responzivní gridy.
Aktivuje CSS Grid. Přímí potomci se stávají grid items rozmístěné do mřížky řádků a sloupců.
display: grid vytvoří grid kontejner. Na rozdíl od Flexboxu je Grid dvourozměrný — řídí rozmístění v řadách i sloupcích současně. Přímí potomci se stávají grid items. display: inline-grid = grid který se chová jako inline element.
/* 3 stejné sloupce */
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1rem;
}
/* 2 sloupce + automatické řady */
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 1rem;
}
/* Implicitní řady auto-výška */
.gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 200px;
gap: 1rem;
}
/* Masonry-like s dense */
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-flow: dense;
gap: 1rem;
}
fr, px, %, auto, repeat(), minmax(), auto-fill, auto-fit. Nejdůležitější grid vlastnost.
fr (fraction) = podíl zbývajícího prostoru po pevných hodnotách. repeat(n, šířka) = N sloupců stejné šířky. minmax(min, max) = flexibilní rozmezí. auto-fill = co nejvíce sloupců. auto-fit = jako auto-fill ale smrští prázdné stopy.
/* 3 stejné sloupce */
.grid { grid-template-columns: 1fr 1fr 1fr; }
/* nebo: */
.grid { grid-template-columns: repeat(3, 1fr); }
/* Různě wide sloupce */
.layout {
grid-template-columns: 240px 1fr 180px;
}
/* ✅ NEJLEPŠÍ: responzivní bez media queries */
.cards {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(200px, 1fr));
gap: 1rem;
}
/* 800px → 4 sloupce (200px každý) */
/* 500px → 2 sloupce */
/* 250px → 1 sloupec */
/* auto-fit: items se roztáhnou */
.cards-fit {
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
}
/* Řádky s min výškou */
.grid {
grid-template-rows:
60px /* první řádek: pevný */
1fr /* druhý: zbývající prostor */
auto; /* třetí: dle obsahu */
}
/* Named grid lines */
.layout {
grid-template-columns:
[sidebar-start] 240px
[sidebar-end main-start] 1fr
[main-end];
}
ASCII mapa layoutu. Nejčitelnější způsob definice komplexního layoutu. Tečka = prázdná buňka.
Umožňuje vizuálně popsat layout pomocí pojmenovaných oblastí. Tečka (.) = prázdná buňka. Na grid items přiřaďte grid-area: nazev. Oblasti musí být obdélníkové. Snadno přeuspořádat v media queries pro mobilní layout.
/* Holy Grail layout */
.page {
display: grid;
grid-template-areas:
"header header header"
"nav main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 160px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 0; /* nebo s mezerami */
}
/* Přiřazení oblastí */
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* Mobilní layout */
@media (max-width: 768px) {
.page {
grid-template-areas:
"header"
"main"
"nav"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
/* Prázdná buňka s tečkou */
.grid {
grid-template-areas:
"logo . nav"
"main main aside";
}
Čísla linek, span N nebo named lines. 1/-1 = celá šířka. grid-area jako shorthand.
grid-column: start / end umístí item na konkrétní linky. span N = roztáhni přes N buněk. Záporné číslo = od konce (-1 = poslední linka). grid-column: 1 / -1 = celá šířka gridu bez ohledu na počet sloupců.
/* Hero přes celou šířku */
.hero { grid-column: 1 / -1; }
/* Span — přes 2 sloupce */
.featured { grid-column: span 2; }
/* Konkrétní pozice */
.sidebar {
grid-column: 1 / 2;
grid-row: 1 / 3; /* přes 2 řádky */
}
.main { grid-column: 2 / -1; }
/* grid-area shorthand */
/* row-start / col-start / row-end / col-end */
.item { grid-area: 1 / 2 / 3 / 4; }
/* Named areas (z grid-template-areas) */
header { grid-area: header; }
main { grid-area: main; }
/* Centrovat item v gridu */
.centered-item {
justify-self: center;
align-self: center;
}
/* Překrývání items */
.overlay {
grid-column: 1 / -1;
grid-row: 1 / -1;
/* Překryje všechna ostatní items */
}
fr = podíl zbývajícího prostoru. minmax(min, max) = sloupec s minimem a maximem. Základ responzivního gridu.
fr (fraction) je jednotka CSS Gridu. 1fr = jeden podíl z dostupného prostoru po odečtení pevných hodnot (px, %). minmax(min, max) definuje rozmezí velikosti stopy — minimální a maximální velikost. Kombinace auto-fill + minmax = automaticky responzivní grid.
/* fr poměry */
.grid {
grid-template-columns: 1fr 1fr 1fr;
/* nebo: repeat(3, 1fr) */
}
/* Pevný sidebar + fr main */
.layout {
grid-template-columns: 240px 1fr;
}
/* minmax: sloupec s minimem */
.grid {
grid-template-columns:
repeat(3, minmax(150px, 1fr));
/* Min 150px, roste do 1fr */
}
/* ✅ Automatický responzivní grid */
.auto-grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
/* auto-fit: items se roztáhnou */
.auto-fit-grid {
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
}
/* 3 items v 800px: každý ~260px */
/* vs auto-fill: mohly by být prázdné sloupce */
/* minmax(0, 1fr) pro overflow fix */
.safe-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
/* Zabrání obsahu přetéct buňku */
}
gap: row-gap column-gap. Stejné jako ve Flexboxu. Dříve grid-gap — název je změněn.
gap přidá mezery mezi grid cells — ne na krajích. Shorthand: gap: row-gap column-gap. Jedna hodnota = stejné v obou směrech. Dříve se jmenovalo grid-gap — starý název stále funguje ale moderní je jen gap.
/* Stejné mezery */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
/* Různé mezery: svisle 2rem, vodorovně 1rem */
.grid {
gap: 2rem 1rem;
/* = row-gap: 2rem; column-gap: 1rem; */
}
/* Jen jeden směr */
.grid {
row-gap: 2rem; /* jen mezi řádky */
column-gap: 1rem; /* jen mezi sloupci */
}
/* ❌ Zastaralý název (ale funkční) */
.grid { grid-gap: 1rem; }
/* ✅ Moderní */
.grid { gap: 1rem; }
/* 1. Automaticky responzivní grid (nejčastější) */
.auto-grid {
display: grid;
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
/* 2. Holy Grail layout (header/nav/main/aside/footer) */
.page {
display: grid;
grid-template-areas:
"header header"
"nav main"
"footer footer";
grid-template-columns: 220px 1fr;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
header { grid-area: header; }
nav { grid-area: nav; }
main { grid-area: main; }
footer { grid-area: footer; }
/* 3. Fotogalerie s různými velikostmi */
.gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
gap: 0.5rem;
}
.gallery .featured {
grid-column: span 2;
grid-row: span 2;
}
/* 4. Centrovat jeden item v gridu */
.container {
display: grid;
place-items: center; /* justify+align najednou */
min-height: 100vh;
}
/* 5. Překrývající se items */
.overlap-grid {
display: grid;
grid-template-columns: 1fr;
}
.overlap-grid > * {
grid-column: 1;
grid-row: 1;
}
/* Všechny items jsou na sobě */
/* 6. Responzivní 2→3→4 sloupce */
.responsive {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.responsive {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1024px) {
.responsive {
grid-template-columns: repeat(4, 1fr);
}
}