Daily Toolkits

CSS Grid Generator

Vizuálně definujte sloupce, řádky a mezery a poté zkopírujte kód šablony CSS mřížky pro své rozvržení.

CSS Grid Generator

Live
1
2
3
4
5
6
7
8
9

CSS output

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 12px;

Key capabilities

  • Vizuálně definujte sloupce, řádky a mezery a poté zkopírujte kód šablony CSS Grid.
  • Běží ve vašem prohlížeči
  • Zdarma k použití

Jak používat

  1. Nastavte počty sloupců a řádků.
  2. Vylaďte mezeru a velikost stopy.
  3. Zkopírujte CSS mřížky.

How this tool works

  1. Nastavte počty sloupců a řádků.
  2. Vylaďte mezeru a velikost stopy.
  3. Zkopírujte CSS mřížky.

Recommended settings

  • Nejprve použijte výchozí možnosti a v případě potřeby upravte

Supported formats

Text / on-page input

File size and limits

  • Velmi složité vícevrstvé náhledy se mohou na starších telefonech zdát pomalejší.

Privacy

Generátory barev a CSS běží výhradně ve vašem prohlížeči. Náhledy a konverze nikdy nenahrávají vaše styly.

Common use cases

  • Použijte CSS Grid Generator, kdykoli potřebujete: Vizuálně definujte sloupce, řádky a mezery a poté zkopírujte kód šablony CSS Grid.

Troubleshooting

Náhled po vložení vypadá jinak

Zkontrolujte, zda na stránce nejsou konkurenční CSS (resety, zděděné barvy). Vygenerované pravidlo nejprve zkopírujte do izolované šablony stylů.

Časté dotazy

Nahrává to můj CSS?

Ne. Generátory a konvertory běží ve vašem prohlížeči s živým náhledem.

Potřebuji účet?

Ne. Otevřete nástroj, upravte ovládací prvky a zkopírujte CSS.

Související nástroje

Flexbox Generator

Experiment with flex direction, wrap, justify, and align — see layouts update live.

Open tool

Border Radius Generator

Control each corner independently and preview rounded shapes with copy-ready CSS.

Open tool

Box Shadow Generator

Design layered box-shadows with offset, blur, spread, and color — live preview included.

Open tool