Firefox 52, Safari 10.1 and Chrome 57 all shipped CSS Grid within 20 days of each other. Firefox went first on 7 March 2017, Safari followed on 27 March 2017, and Chrome landed in between (Grid by Example, 2017). Browsers rarely agree that fast.
A grid layout divides a page into columns and rows, with gutters between them, so every element sits on one shared structure.
Print designers worked this out long before the web existed. CSS Grid now builds the same two-dimensional structure in the browser, and page templates, editorial layouts, dashboards and card galleries all rest on it.
What Is a Grid Layout?
Two things get called a grid layout. One is the design grid used in print and interface work, and the other is the CSS Grid module that builds the same structure in a browser.
The W3C’s CSS Grid Layout Module Level 1 describes the browser version as a two-dimensional layout system built for interface design. Two-dimensional means rows and columns are controlled at once, so content sits in cells where the two meet instead of flowing in a single line.
The grid system is the rule set (column count, gutter width, margins). The layout is whatever those rules produce on an actual page.
What you get out of it is repeatable placement, equal spacing, and a visual hierarchy that readers can scan without effort.
It isn’t a table, which describes data rather than positioning content. Floats and inline-block layouts were workarounds from before grid existed, and a single flex row only controls one axis.
What Are the Parts of a Grid Layout?
Columns are the vertical divisions that hold content, and one element can span several of them. Rows are the horizontal divisions, which set the height of content blocks and the vertical rhythm.
Gutters are the empty space between columns or rows (CSS calls them gaps). Margins sit between the content and the outer edge of the page or screen. Wherever a row and a column cross, you get a module.
Gutters carry the white space of the layout, so they stay empty. Elements span columns but should not start or end inside a gutter.
Material Design warns against gutters as wide as the columns, because oversized gutters leave too little room for content.
Sources disagree on how many parts there are. Material Design and the UCLA design system define the layout grid with columns, gutters and margins only, while Volvo Cars’ guidelines add rows, and the crossings become modules.
The difference follows grid type. A column grid gets by without rows, and a modular grid needs them on top.
CSS Grid has its own names for all of this. Lines divide the grid, tracks are the rows and columns between two lines, cells are the smallest units, and areas are rectangles made of several cells (MDN Web Docs).
Which Types of Grid Layout Exist?
Designers sort grids into column, modular, hierarchical, baseline and manuscript types. They differ in how many axes they divide and what kind of content they hold.
| Type | Structure | Typical use |
|---|---|---|
| Column grid | Vertical columns separated by gutters | Newspapers, magazines, long-form pages |
| Modular grid | Columns plus rows, forming modules | Dense layouts with many images and text blocks |
| Hierarchical grid | Uneven columns and rows sized by content priority | Pages where content types differ in weight |
| Baseline grid | Evenly spaced horizontal lines for text to sit on | Keeping type level across columns |
| Manuscript grid | One large text block inside margins | Books, reports, essays |
Column grids split further. A symmetric grid gives every column the same width, and an asymmetric one runs some columns wider or narrower.
Josef Muller-Brockmann popularized grid systems internationally. His 1981 book Grid Systems in Graphic Design (Niggli) gives instructions for grids of 8 to 32 fields, per the publisher’s description.
He took part early in the International Typographic Style, also called Swiss Design Style, and drew on Constructivism, the Bauhaus, and De Stijl, according to the People’s Graphic Design Archive.
Volvo Cars’ design guidelines describe a modular grid as a column grid with rows added. The resulting blocks are the modules.
For print work, Adobe InDesign is the usual tool for setting column and baseline grids.
How Does CSS Grid Build a Grid Layout?
One declaration does the heavy lifting, display: grid, along with track definitions that set the columns and rows. Everything below is plain CSS. No framework or library is involved.
- Set display: grid on the parent element. Its direct children become grid items.
- Define column tracks with grid-template-columns, for example repeat(3, 1fr).
- Define row tracks with grid-template-rows, or let grid-auto-rows size them.
- Set gutters with the gap property.
- Place items by line number, or name regions with grid-template-areas.
As of the 26 March 2025 draft, the W3C still lists CSS Grid Layout Module Level 1 as a Candidate Recommendation Draft. Browsers ship it anyway.
Grid container and items
Declaring display: grid or display: inline-grid turns an element into a grid container. Only its direct children become grid items, according to MDN Web Docs.
A wrapper div between the container and the items breaks this. The wrapper becomes the only grid item, and its contents stop following the tracks. It’s an easy mistake to make when you’re nesting markup from a page builder.
Tracks and the fr unit
Tracks can be fixed lengths such as 200px 200px 200px, or flexible ones using the fr unit, which takes a fraction of the free space. So 1fr 1fr 1fr equals repeat(3, 1fr).
You can also mix the two. 20px repeat(6, 1fr) 20px gives eight columns with fixed outer edges.
Three column tracks produce four column lines. Line-based placement counts lines, not tracks.
Define only columns and the grid adds rows as needed, auto-sized to their content. Setting grid-auto-rows: minmax(100px, auto) gives those implicit rows a 100px floor and lets them grow, per MDN.
Grid areas and gap
Named areas make page templates readable. grid-template-areas lays out header, sidebar, main, and footer as a text map, and each item claims its region with grid-area.
The gap property sets gutters between tracks only, so outer margins come from padding on the container.
A visual CSS grid generator is quick for sketching tracks, but hand-written tracks are easier to maintain once the layout grows.
Grid Layout or Flexbox: How to Choose
Pick grid when the layout needs control over rows and columns together, and flexbox when items only need to line up along one axis.
MDN Web Docs reduces the test to one question. Does the layout need control by row or column alone, or by row and column together?
Grid works layout in, meaning you define tracks on the container first and then place items into them. Flexbox works content out, so item sizes decide how the line fills and wraps.
Plenty of tutorials say flexbox suits small components and grid suits page layouts. MDN rejects that size rule. A tiny component can be two-dimensional, and a large layout can be one-dimensional.
Grid is probably the answer if:
- items must line up by row and by column at the same time
- you’re setting widths on flex items only to match the row above
- you keep disabling flexibility to hold items rigid
Flexbox is the better fit for a nav bar or button group in a single line, or for an unknown number of items that should wrap by their own size.
Most pages end up using both. Grid handles the page template, and flexbox sits inside components such as a card footer.
How to Make a Grid Layout Responsive
Breakpoints that change the column count are one route, and auto-fit tracks that reflow on their own are the other. They work well together, with breakpoints handling structural changes and auto-fit handling rows of repeating items.
Fixed and fluid grids
A fixed grid holds column and gutter widths constant, and the margins absorb extra screen width. A fluid grid sizes columns in percentages or fr units, so they stretch with the viewport.
Fluid columns inside a max-width container is the usual compromise.
The auto-fit and minmax pattern
One declaration builds a grid that reflows without breakpoints: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). MDN Web Docs uses this pattern to reproduce the wrapping behavior of flexbox.
With auto-fit, empty tracks collapse and the existing items stretch to fill the row. With auto-fill, empty tracks stay put, so items keep the column width.
That difference bites in one case. Two cards in a row that could hold 5 stretch across the full width under auto-fit, which looks wrong fast. Switch to auto-fill when card width has to stay consistent.
How many columns to use
Twelve is the common ceiling. It divides evenly into 2, 3, 4, and 6 columns, and Aon’s design system cites that flexibility, plus asymmetrical layouts, as the reason for its 12-column grid.
The Bootstrap grid is a 12-column system, and its 5.1 documentation describes it as a flexbox grid, not a CSS Grid one. A column count is a design convention that either layout method can build.
Tailwind CSS v3 ships grid-cols-1 through grid-cols-12, and each class compiles to repeat(n, minmax(0, 1fr)). A prefix such as md: applies the utility from that breakpoint up.
Published systems give a useful sense of real numbers:
- The Texas DIR design system uses 12 columns on desktop from 1024px, with a 24px gutter, a 64px outer margin and a 1440px max container.
- Bootstrap 5.1 also uses 12 columns, across six breakpoints (the largest starts at 1400px) and container max widths from 540px to 1320px.
- Aon keeps 12 columns at every breakpoint, with a 20px column gutter and a 40px page margin from 576px up (20px below that).
- The Scottish Government Design System starts at 2 columns up to 480px and adds more at wider breakpoints.
Borrow a published system’s column count and gutter as a starting point, then adjust both to the content.
Where Is Grid Layout Used?
Page templates are the obvious home, with header, sidebar, main, and footer regions sharing one set of tracks. Editorial layouts use column grids where headlines and images span several columns. MDN Web Docs notes grid also scales down to small interface elements.
Dashboards put panels of unequal width and height on shared tracks. Nord Design System points to its fluid grid for screens with heavy interaction or large datasets, and a set of CSS dashboard examples shows how panels span those tracks.
Card galleries pair well with auto-fit, because the browser decides how many cards fit per row. A card layout built this way needs no per-breakpoint rules.
Which Tools Create Grid Layouts?
Design tools set the grid on frames and artboards. Browser DevTools check the CSS grid in the live page.
Design tools
Figma offers layout guides in 3 types (uniform grid, column, row), renamed from layout grids in May 2025. In Sketch, Layout Settings controls columns, gutters, and page margins for each artboard, as IBM’s Carbon Design System documents for its Sketch kit.
To set up a grid in Figma, add a column guide to a frame. The Stretch type resizes columns with the frame and is the only type with a margin setting, per the Figma Help Center.
That same Help Center page separates layout guides from the grid option in auto layout, which is a different feature.
Browser DevTools
Firefox’s Grid Inspector overlays lines and tracks, shows line numbers and named area names, and adds a mini grid view. One option extends the lines to the edge of the viewport.
Chrome DevTools can overlay several grids at once, each in its own color.
Turn the overlay on before editing track definitions. MDN Web Docs stays the reference for property syntax.
When Does a Grid Layout Not Fit?
Grid struggles when tracks must size per item, when there are more columns than the content needs, when content is reordered away from source order, and when your audience is on old browsers.
Tracks that size per item
Grid tracks can respond to content size, but the change applies to the entire track, not to one item (MDN Web Docs).
When every item should size itself, flexbox or normal flow gives the result without fighting the tracks.
Over-gridding
Twelve columns for 3 content blocks adds spans without adding structure.
Name the page regions with grid-template-areas instead, and save the 12-column system for pages whose blocks change width. Miscounted rows break quietly, too. In Bootstrap 3, a row of 9 plus 4 columns wraps the 4-column element onto a new line as one unit.
Reading order and focus order
Tab order and screen reader order follow the source, so a grid that reorders items visually breaks web accessibility for keyboard and screen reader users. Rachel Andrew has raised this since grid first shipped.
Chrome 137 (27 May 2025) added reading-flow, which maps focus order to grid rows, columns, or order. As of October 2026, web-features lists it as limited availability: Chrome and Edge ship it, Firefox and Safari do not.
So write the HTML in the order you want it read, and treat reading-flow as an enhancement for Chrome and Edge only.
Browser support and fallbacks
Firefox 52 shipped grid on 7 March 2017 and Chrome 57 followed on 9 March 2017. Safari 10.1 arrived in March 2017, with iOS 10.3 and macOS Sierra 10.12.4.
Internet Explorer and earlier Edge versions supported only an older draft of the spec behind the -ms- prefix, so they did not run modern grid code.
The standard fallback is a flexbox or float layout first, with grid rules wrapped in @supports (display: grid). A browser that does not understand feature queries skips the block and keeps the old layout.
MDN Web Docs recommends flexbox as that fallback layer, because older browsers support it better.
How much of this matters depends on your audience, so check cross-browser compatibility against your own analytics. Rachel Andrew’s advice is to pick a Baseline year from audience data and skip fallbacks for anything past that line.
Subgrid, which lets a nested grid adopt its parent’s tracks, is newer. Firefox 71 shipped it in December 2019, Safari 16 in September 2022, and Chrome and Edge 117 in September 2023.
That set 15 September 2023 as the Baseline Newly available date, and web-features lists subgrid as Widely available since 15 March 2026.
Grid Layout FAQ
How many gutters does a 12-column grid have?
It has 11 gutters, one between each pair of adjacent columns.
The rule is columns minus one. Margins at the left and right edges add no gutters.
Is a gutter the same as a gap?
Yes, in practice. Gutter is the design term, and gap is the CSS property that sets the space between rows and columns.
Older code still uses the original name, grid-gap.
Who popularized grid-based design?
Josef Muller-Brockmann, through the Swiss style. He co-edited the journal Neue Grafik from 1958 to 1965 and published Grid Systems in Graphic Design in 1981.
Rudimentary grids existed as far back as medieval times.
How do you center items in a grid?
Set place-items: center on the grid container to center every item inside its cell.
For a single item, use justify-self and align-self. To center the tracks themselves when the grid is smaller than its container, use place-content: center.
What is subgrid in CSS Grid?
A nested grid can use the tracks of its parent grid when you give grid-template-columns and grid-template-rows the subgrid value. Nested items then line up with the outer grid.
Gaps are inherited but can be overridden, and line numbering restarts inside the subgrid (MDN Web Docs).
Why did the 960 grid system use a 960px width?
The number 960 divides evenly by 2, 3, 4, 5, 6, 8, 10, 12, 15, and 16, which gave Nathan Smith’s framework flexible column splits.
It also fit 1024 x 768 monitors. The 12-column and 16-column versions put 20px gutters between columns, per the 960.gs site.
Setting Up a Grid Layout on a Real Project
Start with the column count, then set gutters and margins, then test the whole thing against real content at every breakpoint.
Gutter and margin values depend on column width, so fixing the count first avoids resetting both later. Placeholder text hides overflow and uneven card heights, which only real copy and images expose.
This sequence changes once Firefox and Safari ship reading-flow (position verified October 2026), because grid items would then move visually without breaking focus order.
After the grid holds, responsive design decides how it reflows across screen sizes.
Many of his resources are available on various design marketplaces. Over the years, he's worked with a range of clients and contributed to design publications like Designmodo, WebDesignerDepot, and Speckyboy, Slider Revolution among others.
- How to Insert Image in Figma With Ease - November 3, 2026
- How to Download Figma Files Fast and Free - October 30, 2026
- Figma Keyboard Shortcuts That Will 10x Your Speed - October 25, 2026
