Generátor CSS Grid — Tvorba Dvojrozměrných Rozvržení

CSS Grid je nejmocnější nástroj pro rozvržení v CSS. Náš generátor umožňuje vizuálně definovat sloupce, řádky a mezery a generuje hotový Grid kód.

Koncepty Gridu

grid-template-columns definuje šířky sloupců. grid-template-rows definuje výšky řádků. gap (nebo grid-gap) nastaví mezery mezi buňkami. fr (fraction unit) rozděluje dostupný prostor proporcionálně.

Responzivní Grid s auto-fill

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) vytvoří responzivní mřížku bez media queries. Sloupce se automaticky přizpůsobí dostupné šířce. Minimální velikost (250px) zabrání příliš úzkým sloupcům na mobilu.

Umístění prvků v Gridu

grid-column: 1 / 3 nechá prvek obsadit dva sloupce. grid-area přiřadí prvku název pro umístění. grid-template-areas umožňuje vizuálně popsat rozvržení textem. Mocné pro složitá rozvržení stránek.