Free CSS Grid Generator

How It Works

1. Set grid dimensions: enter the number of columns and rows for your grid layout.
2. Define tracks: set the width of each column and height of each row using fr units, pixels, percentages, auto, or minmax().
3. Copy the CSS: the generated display: grid, grid-template-columns, grid-template-rows, and gap properties are ready to paste into your stylesheet.

Why Use CSS Grid Generator?

CSS Grid is the most powerful layout system in CSS, capable of creating complex two-dimensional layouts that previously required tables, floats, or JavaScript. But mastering grid-template-columns, fr units, minmax(), repeat(), and named areas takes practice. This visual generator lets you build any grid layout by clicking and dragging, then outputs clean CSS that you can use immediately or study to deepen your understanding of Grid.

Features

• Visual grid builder: click to define column and row tracks visually.
• fr unit support: use flexible fr units for responsive proportional columns.
• minmax() shortcut: easily create responsive columns with minimum and maximum size constraints.
• Gap control: set column-gap and row-gap independently.
• Named areas: define grid-template-areas with a visual area-painting interface.

Frequently Asked Questions

What is a "fr" unit in CSS Grid?

The fr (fraction) unit distributes available space proportionally. In a 3-column grid with 1fr 2fr 1fr, the middle column gets twice as much space as the outer columns. fr units fill remaining space after fixed-size tracks are allocated.

How do I make a responsive grid without media queries?

Use repeat(auto-fill, minmax(200px, 1fr)) for the grid-template-columns value. This creates as many columns as fit at the minimum size, expanding to fill available space. Items automatically reflow as the container width changes.

What is the difference between grid-template and grid-auto?

grid-template-columns/rows defines explicit tracks that you specify. grid-auto-columns/rows defines the size of implicit tracks, columns and rows created automatically when items overflow the explicit grid.

A Short History of CSS Grid

Before CSS Grid, web layouts went through three painful eras. Table-based layouts (1995-2008) abused the <table> element for visual structure, with «slicing and dicing» Photoshop comps into HTML grids. Float-based layouts (2008-2013) replaced tables with the float property, requiring «clearfix» hacks like Nicolas Gallagher's micro-clearfix (2011) to contain wrapped children. Flexbox (CSS Flexible Box Layout Module Level 1, W3C Recommendation 2018) solved one-dimensional layouts but struggled with true two-dimensional grids. The CSS Grid story began with Microsoft's -ms-grid implementation in Internet Explorer 10 (2012), an early take that informed the W3C specification. The first W3C public working draft of CSS Grid Layout Module Level 1 dropped in April 2011, but real momentum came from advocacy work by Rachel Andrew (her book Get Ready for CSS Grid Layout, 2016) and Jen Simmons (Mozilla developer advocate, 2016-2018 conference circuit). The browser race resolved in a remarkable two-month window in March 2017: Chrome 57, Firefox 52, Safari 10.1, and Edge 16 all shipped unprefixed Grid within weeks of each other. The W3C marked Grid Level 1 a Candidate Recommendation in December 2016; the final W3C Recommendation arrived in August 2020. Subgrid (Level 2) shipped in Firefox 71 (Dec 2019), Safari 16 (Sept 2022), and Chrome 117 (Sept 2023). The next frontier is the proposed Masonry layout (CSS Working Group 2020 proposal, Firefox flag-gated since 2021).

The Anatomy of a CSS Grid

• The grid container. display: grid (or display: inline-grid) turns any element into a grid context. Direct children of that element become «grid items» and participate in the grid layout. Grandchildren are unaffected unless they too set display: grid.
• grid-template-columns and grid-template-rows. Define the explicit tracks (columns and rows). Values can be fixed (px, em, rem), flexible (fr, the «fraction» unit defined in the CSS Grid spec), content-sized (auto, min-content, max-content), or any combination. grid-template-columns: 200px 1fr 1fr creates a 200px sidebar plus two equal flexible columns.
• The fr unit. The fraction unit distributes remaining space after fixed-size tracks are allocated. 1fr 2fr 1fr gives the middle column twice the leftover space of the side columns. fr is unique to Grid (and the related flex-basis: 0 1 fr equivalent in Flexbox is not the same thing). It solves what the «percentage column» pattern struggled with for decades: clean leftover-space distribution.
• repeat() and minmax(). repeat(3, 1fr) compactly defines three equal columns. minmax(200px, 1fr) constrains a track to a range. The killer combination grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) produces a responsive grid that auto-adjusts column count to fit the container, without media queries. This single line replaced thousands of breakpoint definitions in production CSS.
• grid-template-areas. A visually-laid-out string syntax that names regions of the grid. Children opt into a named area with grid-area: header. The result is layout-as-ASCII-art: anyone reading the CSS can visualise the grid from the source. Particularly powerful for the «holy grail» layout (header / sidebar / main / aside / footer) that defeated CSS designers for a decade.
• gap (and column-gap, row-gap). Defines spacing between tracks. gap: 16px uniformly spaces all rows and columns. Before Grid, this required brittle padding+margin patterns or carefully calculated negative margins. The same gap property was later added to Flexbox (universally supported since 2022) and is now considered the canonical way to handle inter-item spacing in modern CSS.

Real-world Grid Patterns

• Image galleries. The repeat(auto-fill, minmax(200px, 1fr)) pattern is the dominant CSS for portfolio sites (Behance grids), photo galleries (Unsplash-style), and product collections. Auto-adapting column count without media queries was effectively impossible before Grid.
• Dashboards and admin panels. Grafana, Datadog, Stripe Dashboard, and most modern admin UIs use named grid areas to position cards, sidebars, and content regions. Drag-and-drop dashboard builders (DataDog, Looker, Tableau) translate user actions to grid-template-areas string mutations.
• Magazine-style layouts. Editorial sites (The Guardian, NYT, Vox) use Grid for asymmetric layouts with overlapping elements, large hero images that span multiple columns, and pull quotes that break out of the main text column. Grid's z-axis (z-index with explicit areas) handles the layering naturally.
• Product card grids. Shopify, Amazon, Etsy storefronts. The pattern is so common that Tailwind CSS, Bootstrap, and Bulma all ship grid-based card components as part of their core utility set. Card aspect-ratio is now typically locked with aspect-ratio property (Safari 15, Chrome 88, 2021).
• The «holy grail» layout. Header / left sidebar / main content / right sidebar / footer. This 5-region layout was the unsolved problem of CSS for 15 years. With grid-template-areas and 8 lines of CSS, it became trivial in 2017. The pattern dominates documentation sites (Stripe Docs, MDN, Vercel Docs).
• Form layouts. Two-column form layouts with labels on the left and inputs on the right, address forms with city/state/zip in one row, multi-step wizards. Grid lets labels and inputs align cleanly across rows even when content widths vary. The pattern replaced earlier label-width-hack approaches with cleaner CSS.
• Modal and dialog positioning. display: grid; place-items: center; on a full-viewport overlay perfectly centres a dialog horizontally and vertically with a single line, replacing decades of position: absolute; top: 50%; transform: translateY(-50%); patterns. place-items is the canonical 2024 way to centre arbitrary content.
• Responsive without media queries. Combining repeat(auto-fill, minmax(...)) with gap produces layouts that adapt to container width without any media query. This is the bedrock of modern responsive design: layouts that respond to container size rather than viewport size, anticipating Container Queries (now also shipped, 2023).

Standards and Milestones

• IE10 -ms-grid (2012). Microsoft shipped the first Grid-like implementation, designed by Phil Cupp at Microsoft. The syntax differed from the eventual W3C spec but proved the concept and influenced later design decisions.
• CSS Grid Layout Module Level 1, W3C Working Draft (April 2011). The first public W3C draft. Multiple iterations followed; the syntax evolved significantly between 2011 and the final 2017 implementation.
• Rachel Andrew and Jen Simmons advocacy (2014-2017). Andrew's book Get Ready for CSS Grid Layout (Smashing Magazine, 2016) and Simmons's Mozilla developer-advocate conference talks built the community knowledge base that made browser shipping viable. Both are credited in the W3C Editor's notes for the spec.
• Browser race, March 2017. Within a remarkable two-month window, Chrome 57 (March 9), Firefox 52 (March 7), Safari 10.1 (March 27), and Edge 16 (October 2017) all shipped unprefixed Grid. This level of synchronised cross-browser shipping was almost unprecedented for a feature of this complexity.
• Candidate Recommendation (December 2016). CSS Grid Level 1 was promoted to W3C Candidate Recommendation, the final stage before W3C Recommendation. The CR phase typically takes years; Grid moved faster than most CSS features at this stage.
• W3C Recommendation (August 2020). Grid Level 1 was finalised as a W3C Recommendation. This is technically the spec's «launch» date, but every major browser had shipped a working implementation three years earlier.
• Subgrid (Level 2, 2019-2023). Subgrid lets a grid item inherit its parent's track definitions, solving the «nested grid alignment» problem. Firefox 71 (Dec 2019), Safari 16 (Sept 2022), Chrome 117 (Sept 2023). The slow Chrome roll-out reflected the implementation complexity.
• Masonry layout (proposed, 2020-). CSS Working Group has been debating syntax since 2020. Firefox shipped it behind a flag in 2021. Pinterest-style flowing layouts that pack items into columns are the target use case. Chrome team (Apple-led) and Mozilla team have proposed competing syntaxes; resolution pending as of 2024.

More frequently asked questions

When should I use Grid vs Flexbox?

The community shorthand: Flexbox is for one dimension, Grid is for two. If you're laying out a row of buttons or aligning items in a single direction, Flexbox is simpler. If you're designing a whole-page layout with rows and columns that must align, Grid is the right tool. Many real layouts combine both: Grid for the page skeleton, Flexbox for component-level alignment within each grid area. Modern frameworks (Tailwind, Bootstrap 5) embrace this pattern.

Does CSS Grid work in older browsers?

All evergreen browsers (Chrome, Firefox, Safari, Edge) support Grid since March 2017. Internet Explorer 11 has only the early -ms-grid syntax (subset, prefixed, missing many features). For IE11 support, use @supports queries to fall back to Flexbox or float layouts. As of 2024, IE11 has <0.5% global usage, so most teams have dropped the fallback. Caniuse.com reports 97%+ global support for unprefixed Grid.

What is the difference between grid-template-areas and grid-area?

grid-template-areas is set on the grid container and visually maps out the named regions of the grid (one string per row). grid-area is set on a grid item to assign it to one of those named regions. The two work together: container declares the «map», items declare «I'm region X». You can also use grid-area directly with line numbers (grid-area: 1 / 1 / 3 / 4) instead of names, which is useful for dynamic layouts.

What is subgrid and when should I use it?

Subgrid lets a nested grid inherit its parent grid's track definitions instead of creating its own. This solves the problem of aligning items across nested grids, for example, a card with internal layout that must align with surrounding cards. Use grid-template-columns: subgrid on the nested grid. Available in Firefox 71+ (Dec 2019), Safari 16+ (Sept 2022), Chrome 117+ (Sept 2023). Falls back to a regular nested grid in unsupporting browsers.

How does Grid interact with accessibility?

Grid placement does not change the DOM source order: items appear in the visual position you assign, but screen readers and keyboard tab order follow the source. WCAG 2.1 SC 1.3.2 Meaningful Sequence requires the source order to make sense when styles are stripped. The implication: design your DOM source for logical reading order first, then use Grid to place items visually. If you reorder items dramatically with grid-column: 3 / 5; grid-row: 2, audit with a screen reader to confirm the spoken order still makes sense.