CSS Grid Generator
Generate CSS Grid layouts visually. Kostenlos, ohne Anmeldung, funktioniert im Browser.
Über CSS Grid Generator
This visual CSS Grid generator lets you configure grid container properties and see the result in a live preview. Set the number of columns and rows, choose sizing units (fr, auto, px, minmax), adjust column and row gaps, and control item alignment with justify-items and align-items. The generated CSS updates in real time as you change settings. Ideal for prototyping grid layouts, learning CSS Grid properties, or quickly generating grid CSS for your projects.
Häufig gestellte Fragen
What does the 'fr' unit mean in CSS Grid?
The 'fr' unit stands for 'fraction'. It represents a fraction of the available space in the grid container. For example, '1fr 2fr' creates two columns where the second is twice as wide as the first.
What is the difference between CSS Grid and Flexbox?
CSS Grid is designed for two-dimensional layouts (rows AND columns), while Flexbox is for one-dimensional layouts (either rows OR columns). Grid gives you precise control over both axes simultaneously, making it better for page-level layouts. Flexbox is better for distributing items along a single axis.
What does 'minmax(100px, 1fr)' do?
The minmax() function sets a minimum and maximum size for a grid track. 'minmax(100px, 1fr)' means the column will be at least 100px wide but can grow to fill available space (1fr). This is useful for responsive layouts that need a minimum size.