Free CSS Grid Generator — Visual Builder with Named Areas & Tailwind Output

fr (fraction) units divide the available space after fixed-size tracks are subtracted. grid-template-columns: 200px 1fr 2fr creates a 200px first column, then divides the remaining space — 1fr gets one third, 2fr gets two thirds. Percentages calculate from the total container width including gaps, so grid-template-columns: 25% 75% can overflow when a column-gap is set. fr units automatically account for gaps. Use fr for flexible tracks, px for fixed sidebars or headers, and a mix for hybrid layouts like a 260px sidebar with 1fr main content.

grid-template-areas lets you describe your layout visually using named strings. You define which cells belong to which region — for example grid-template-areas: "header header" "sidebar main" "footer footer" — then assign items with grid-area: header. The result is readable, maintainable CSS where the layout structure is visible directly in the stylesheet. It is ideal for page-level layouts with distinct named sections, dashboard panels, and marketing templates. This tool generates the full grid-template-areas block whenever you assign area names to cells in the preview.

grid-auto-flow controls how the browser places items that are not explicitly positioned. The default is row — items fill cells left-to-right, wrapping to a new row. column places items top-to-bottom, wrapping to a new column. Adding dense to either (row dense or column dense) tells the browser to backfill gaps left by larger spanning items, which is useful for gallery-style layouts where you want to eliminate holes. Change auto-flow when you have items with different spans and want the grid to pack them tightly, or when you want columnar reading order.

Use repeat() with auto-fit and minmax(): grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)). This creates columns that are at minimum 250px wide (shrinking to 100% on very small screens to prevent overflow) and at maximum 1fr. auto-fit collapses empty tracks so items expand to fill space. The grid shifts from multi-column to single-column automatically as the viewport narrows — no media queries needed. Add gap: 1rem for spacing. This pattern (Repeat, Auto-fit, Minmax) works for card grids, product listings, and image galleries.

justify-items aligns each grid item within its own cell along the inline (horizontal) axis. Setting justify-items: center centers every item inside its cell. justify-content aligns the entire grid track structure within the container when the tracks do not fill it — space-between distributes extra space between columns. Think of it this way: justify-items controls content inside cells, justify-content controls the columns themselves inside the container. The same distinction applies to align-items (items within cells on the block axis) versus align-content (tracks within the container on the block axis).

Yes, and this is the recommended modern approach. CSS Grid handles two-dimensional structure — defining the major layout areas like header, sidebar, main content, and footer. Flexbox handles one-dimensional alignment within those areas — centering nav items, spacing buttons, aligning icon and text side by side. A common pattern is a Grid container for the page skeleton, with each grid area using display: flex internally for its own content layout. Use Grid for structure and Flexbox for component-level alignment inside each section.