CSS Grid Generator

CSS Grid is a two-dimensional layout system that lets you place elements in rows and columns simultaneously. Use Grid when your layout has a defined structure in both axes — like page layouts, card grids, dashboards, and image galleries. Use Flexbox when you're laying out items in a single row or column with flexible sizing. Grid is better for macro layout; Flexbox is better for component-level alignment.

The "fr" (fraction) unit represents a fraction of the available space in the grid container. With grid-template-columns: repeat(3, 1fr), each column gets exactly one-third of the container width. With 1fr 2fr 1fr, the middle column gets twice as much space as each of the outer columns. The fr unit distributes remaining space after fixed-size and auto-size columns are accounted for.

The gap shorthand sets spacing between grid tracks. gap: 16px sets both row and column gaps to 16px equally. gap: 16px 24px sets row-gap to 16px and column-gap to 24px. Use row-gap and column-gap for independent control. Note: gap only applies between tracks — it does not add space on the outer edges of the grid container. Use padding on the container for outer spacing.

justify-items controls how grid items are aligned horizontally within their cells (along the inline/row axis). align-items controls vertical alignment within cells (along the block/column axis). Both default to "stretch", which makes items fill their entire cell. Set them to "start", "end", or "center" to control how items sit within their allocated grid area. Use justify-self and align-self on individual items to override per-item.

Yes. Use auto-fill or auto-fit with minmax() to create a responsive grid that automatically adjusts the number of columns: grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)). This creates as many 250px+ columns as fit in the container, automatically wrapping to fewer columns on smaller screens — no media queries needed. auto-fill creates empty tracks if there are fewer items; auto-fit collapses empty tracks to zero.

auto makes a row height equal to the tallest content in that row — the row shrinks or grows with its content. 1fr divides the available height equally among rows, giving each row an equal share of the container height. Use auto for most content-driven layouts. Use 1fr when you want rows to fill the full container height equally, such as in full-height application layouts.

Yes. CSS Grid is supported in all modern browsers: Chrome 57+, Firefox 52+, Safari 10.1+, and Edge 16+. This covers over 97% of global users as of 2024. The generated CSS uses standard syntax with no vendor prefixes required. The only exception is Internet Explorer 11, which has partial Grid support using an older syntax — but IE11 is no longer supported by Microsoft.

grid-template-areas lets you lay out a grid as an ASCII-art map of names, which is far more readable than line numbers. You name regions in the container — grid-template-areas: 'header header' 'sidebar main' 'footer footer' — and then each child just declares grid-area: header (or sidebar, main, footer). The layout is visible right there in the CSS: you can SEE that the header spans both columns and the sidebar sits left of main. It also makes responsive changes trivial — in a mobile media query you redraw the same areas in a single column ('header' 'main' 'sidebar' 'footer') and every item moves automatically, no per-item repositioning. It's the most maintainable way to express page-level layouts.

Subgrid lets a nested grid align to its PARENT grid's tracks instead of creating its own independent ones. The classic problem it fixes: a row of cards where each card has a title, body, and footer of differing lengths — normally each card's internal rows size independently, so the titles and footers don't line up across cards. With grid-template-rows: subgrid, the cards share the parent's row lines, so all titles align, all footers align, and the cards look like a clean table even though they're separate components. Before subgrid this required fixed heights or JavaScript. It's supported in all current major browsers and is the right tool whenever inner elements of sibling components need to align to a shared grid.