Pro vývojáře

Generátor CSS Grid

Vizuálně navrhněte CSS Grid rozvržení s živým náhledem a generujte připravený kód.

Předvolby

Tvůrce šablon

Stopy sloupců (3)

Stopy řádků (3)

Ovládání mezer

Mezera sloupců8px

Mezera řádků8px

Kontejner

Zarovnat položky do bloku

Zarovnat položky

Zarovnat obsah do bloku

Zarovnat obsah

Náhled buněk mřížky

Přetáhněte pro sloučení buněk

1,1

1,2

1,3

2,1

2,2

2,3

3,1

3,2

3,3

Náhled

Šířka600px

Výška400px

Položky (3/16)

Položka 1

Začátek sloupce

Rozpětí sloupce

Začátek řádku

Rozpětí řádku

Zarovnat sebe do bloku

Zarovnat sebe

Název oblasti

Položka 2

Začátek sloupce

Rozpětí sloupce

Začátek řádku

Rozpětí řádku

Zarovnat sebe do bloku

Zarovnat sebe

Název oblasti

Položka 3

Začátek sloupce

Rozpětí sloupce

Začátek řádku

Rozpětí řádku

Zarovnat sebe do bloku

Zarovnat sebe

Název oblasti

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}

O Generátoru CSS Grid

Generátor CSS Grid je bezplatný vizuální nástroj pro tvorbu CSS Grid rozvržení s živým náhledem. Konfigurujte sloupce, řádky, mezery a zarovnávací vlastnosti, přidávejte položky s vlastním umístěním a rozpětím a kopírujte vygenerovaný CSS kód.

Procházet všechny nástroje Pro vývojáře

Jak používat

Nastavte sloupce a řádky, přizpůsobte velikosti, upravte mezery a zarovnání. Přidejte položky mřížky s rozpětím sloupců/řádků. Použijte přednastavená rozvržení pro běžné vzory. Zkopírujte CSS výstup pro použití ve vašem projektu.

Případy použití

Učení CSS Grid prostřednictvím vizuálního experimentování
Prototypování rozvržení stránek jako dashboardy
Vytváření responzivních mřížkových rozvržení
Návrh galerií a mřížek karet
Generování produkčně připraveného CSS Grid kódu

Jak používat Generátor CSS Grid Udělejte si přestávku a zahrajte si bezplatné hry v prohlížeči

Všechny příspěvky

c/tools_css-grid-generator0

Zobrazit vše Vytvořit příspěvek