CSS Grid Generator
Generate CSS grid layouts: responsive card grids with auto-fill and minmax, fixed column templates, or a page layout with named areas and a mobile fallback.
Free · No sign-up · Your inputs stay in your browser
Input
Build a CSS grid layout
Output
CSS
127 characters
repeat(auto-fill, minmax(12rem, 1fr)) is the one-line responsive grid: as many 12rem columns as fit, stretched to fill the row, with no media query. auto-fit instead collapses empty tracks so a few items stretch across the whole row. Named areas let the source order stay logical for screen readers while the visual layout moves.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
The one-line responsive grid
repeat(auto-fill, minmax(12rem, 1fr)) creates as many 12rem columns as fit and stretches them to fill the row, with no media queries. auto-fit behaves the same but collapses empty tracks, so a few items stretch across the full width. MDN's grid layout guide covers the details.
Named areas
grid-template-areas draws the layout as text, and moving an area is a matter of rewriting the strings in a media query. The HTML can stay in a logical reading order for screen readers while the visual order changes.