Generator de grilă CSS
Definiți vizual coloanele, rândurile și golurile, apoi copiați codul șablonului CSS Grid pentru aspectul dvs.
CSS Grid Generator
LiveCSS output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px;
Key capabilities
- Definiți vizual coloanele, rândurile și golurile, apoi copiați codul șablonului CSS Grid.
- Se rulează în browserul dvs
- Gratuit de utilizat
Cum se folosește
- Setați numărul de coloane și rânduri.
- Reglați distanța și dimensiunea pistei.
- Copiați grila CSS.
How this tool works
- Setați numărul de coloane și rânduri.
- Reglați distanța și dimensiunea pistei.
- Copiați grila CSS.
Recommended settings
- Utilizați mai întâi opțiunile implicite, apoi ajustați dacă este necesar
Supported formats
Text / on-page input
File size and limits
- Previzualizările cu mai multe straturi foarte complexe se pot simți mai lente pe telefoanele mai vechi.
Privacy
Generatoarele de culoare și CSS rulează în întregime în browserul dvs. Previzualizările și conversiile nu vă încarcă niciodată stilurile.
Common use cases
- Utilizați CSS Grid Generator oricând aveți nevoie: definiți vizual coloanele, rândurile și golurile, apoi copiați codul șablonului CSS Grid.
Troubleshooting
Previzualizarea arată diferit după lipire
Verificați dacă există CSS concurente pe pagina dvs. (resetări, culori moștenite). Copiați mai întâi regula generată într-o foaie de stil izolată.
Întrebări frecvente
Acest lucru îmi încarcă CSS-ul?
Nu. Generatoarele și convertoarele rulează în browserul dvs. cu previzualizare live.
Am nevoie de un cont?
Nu. Deschideți instrumentul, modificați controalele și copiați CSS-ul.
Instrumente similare
Flexbox Generator
Experiment with flex direction, wrap, justify, and align — see layouts update live.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool