Design

Generátor CSS Grid

Vytvářejte rozvržení CSS Grid vizuálně.

Přednastavení rozvržení (10)

Přetáhněte přes buňky pro nakreslení obdélníku, nebo klikněte na jednu buňku po sobě. Každá pojmenovaná oblast musí zůstat obdélníková.

Živý náhled

Jednorozměrný: Generátor CSS Flexbox.

Vytvoř mřížku CSS s pojmenovanými oblastmi

Namalujte si mřížku písmen pro oblasti šablon nebo vyberte přednastavený vzor. Náhled zobrazí každou oblast v jiném odstínu.

FAQ

Co je grid-template-areas?

Způsob, jak pojmenovat oblasti rozvržení (hlavička, postranní panel, hlavní obsah…) a umístit prvky podle názvu místo čísel řádků. Klikněte na buňky níže pro vybarvení písmen oblastí – CSS se aktualizuje v reálném čase.

Mohu začít z přednastavení?

Ano – deset přednastavených rozvržení včetně Holy Grail, dashboardu, magazínu a app shellu načtou pojmenované oblasti jedním kliknutím.

Je cokoli nahráno?

Ne. CSS je generován zcela v prohlížeči.

Naposledy aktualizováno: