Daily Toolkits

CSS Grid Generator

Határozza meg vizuálisan az oszlopokat, sorokat és hézagokat, majd másolja ki a CSS Grid sablonkódját az elrendezéshez.

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

  • Határozza meg vizuálisan az oszlopokat, sorokat és hézagokat, majd másolja ki a CSS Grid sablonkódját.
  • A böngészőben fut
  • Ingyenesen használható

Használati útmutató

  1. Állítsa be az oszlopok és sorok számát.
  2. Hangolási rés és pályaméretezés.
  3. Másolja a rács CSS-jét.

How this tool works

  1. Állítsa be az oszlopok és sorok számát.
  2. Hangolási rés és pályaméretezés.
  3. Másolja a rács CSS-jét.

Recommended settings

  • Először használja az alapértelmezett beállításokat, majd módosítsa, ha szükséges

Supported formats

Text / on-page input

File size and limits

  • A nagyon összetett többrétegű előnézetek lassabbnak tűnhetnek a régebbi telefonokon.

Privacy

A szín- és CSS-generátorok teljes egészében az Ön böngészőjében futnak. Az előnézetek és a konverziók soha nem töltik fel a stílusokat.

Common use cases

  • A CSS Grid Generator használata bármikor szükséges: Határozza meg vizuálisan az oszlopokat, sorokat és hézagokat, majd másolja ki a CSS Grid sablonkódját.

Troubleshooting

Az előnézet beillesztés után másképp néz ki

Ellenőrizze, hogy az oldalon található-e versengő CSS (visszaállítások, örökölt színek). Először másolja át a generált szabályt egy elszigetelt stíluslapba.

GYIK

Ez feltölti a CSS-emet?

Nem. A generátorok és konverterek élő előnézettel futnak a böngészőben.

Szükségem van fiókra?

Nem. Nyissa meg az eszközt, módosítsa a vezérlőket, és másolja a CSS-t.

Kapcsolódó eszközök

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