A sidebar ratio
The Sidebar + content preset uses column weights 1fr and 2fr. After gaps are removed, the second track receives twice the flexible share of the first.
Compose a grid
Grid preview
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Responsive mode lets the browser choose the number of columns and uses single-cell items. Fixed mode supports fractional column weights and one spanning item. Dense packing can change visual reading order. Column flow can create extra implicit columns when rows fill.
Use grid-layout on a parent containing 6 elements. Preview width and decorative card styles are omitted from the export. Explicit empty rows keep their minimum height.
Inputs and previews are processed locally in your browser. No external color or design API is used.
How to use the CSS Grid Generator
- 01
Choose fixed tracks for explicit column proportions or responsive auto-fit for a gallery.
- 02
Set row minimums, gap, item count, and alignment.
- 03
In fixed mode, edit fr weights and the featured item row or column spans.
- 04
Resize the simulated container and inspect placement before exporting CSS.
Examples
A gallery that adapts
Responsive gallery uses auto-fit with a minimum card width. Columns appear as room becomes available; the min(100%, width) guard lets a track fit a narrower container.
Explicit and implicit tracks
The specified columns and rows form the explicit grid. Additional content can create implicit rows or columns, depending on auto-flow and spans. This export gives implicit rows the same minimum height as explicit rows. Column flow can extend horizontally after filling the stated rows, so test overflow in the final component.
Spans and packing
A spanning item covers consecutive tracks. This tool applies spans to one numbered item in fixed mode. Responsive mode uses one-cell items so an oversized span cannot force extra columns. Dense packing can fill earlier holes with later items, which can make the visual order differ from the document order.
Common questions
Why do empty rows still take up space?
The row control creates explicit rows with a minimum height. Reduce the row count if the layout needs fewer reserved rows.
Does 2fr always mean twice the pixel width?
With this generator, minmax(0, weight fr) permits tracks to shrink toward zero and apportions flexible space by weight. Content overflow and container padding still need testing in your component.
What markup do I need?
Apply grid-layout to a parent element with direct children. The featured-item selector uses its child number. Decorative preview colors and the simulated width are not part of the exported layout.