Ditch endless media queries – CSS Grid can handle every screen.
In this step-by-step guide you’ll build a responsive grid that works on phones, tablets, and desktops.
We start mobile-first with one column, add breakpoints at 600px and 900px, then switch to repeat(auto-fit, minmax(300px, 1fr)) so columns wrap on their own.
You’ll type the exact CSS, watch the cards reflow from one to three columns, and get quick fixes if layout quirks show up.
Overview of Building a Responsive Grid Layout with CSS Grid
A responsive grid layout shifts its column count and spacing based on screen size. CSS Grid handles this through properties like display: grid and grid-template-columns, letting you build flexible, multi-column structures that reflow on their own or change at specific breakpoints. You won’t wrestle with floats or percentage math anymore. Just describe what you want and the browser does the work.
The mobile-first approach starts with a single column for small screens, then adds more as space opens up. A common pattern uses breakpoints at 600px and 900px to move from one column to two, then two to three. The same twelve cards rearrange themselves into 1×12, 2×6, or 3×4 grids without touching the HTML.
Core CSS Grid tools you’ll use:
repeat() duplicates column definitions so you don’t type them over and over
fr units distribute available space as fractional shares instead of fixed pixels
minmax() sets minimum and maximum sizes for tracks, which enables automatic wrapping
auto-fit collapses empty columns and expands filled ones to use all space
auto-fill creates as many columns as will fit, leaving extras empty
media queries apply different grid rules at specific viewport widths
The tutorial below walks through each property in order. You’ll start with plain HTML and build up to a fully responsive grid that works on phones, tablets, and desktops. You’ll see exactly what to type and what should happen after each step.
How to Make a Responsive Grid Layout with CSS Grid Step by Step
Preparing the HTML Structure
Open your editor and create a new HTML file. Inside the <body> tag, add a container <div> with a class of row. Inside .row, write twelve child <div> elements, each with a class of card. Add a short text label inside each card (something like “Card 1”, “Card 2”) so you can see them in the browser.
Save and open the file. You should see twelve plain text blocks stacked vertically. No grid yet, just default block-level flow.
Applying Base Grid Styles
In your CSS, target .row and set display: grid; to turn it into a grid container. Add gap: 1rem; to create 1rem of space between all grid cells. Leave grid-template-columns unset for now. The default is one column, which gives every card the full row width on small screens.
Reload the page. Cards still stack vertically, but now they have 1rem of breathing room between them. That gap property handles both horizontal and vertical spacing in one line.
Adding Responsive Breakpoints
Write a media query that activates at (min-width: 600px). Inside that query, update .row with grid-template-columns: repeat(2, 1fr); to create two equal columns. Write a second media query at (min-width: 900px) and set grid-template-columns: repeat(3, 1fr); for three columns. Save and resize your browser window. Cards should reflow from one column to two at 600px, then from two to three at 900px.
This breakpoint pattern produces three distinct layouts (3×4, 2×6, 1×12) from the same twelve-card HTML. The repeat() function duplicates 1fr the specified number of times, giving each column an equal share of available space.
Using minmax() for Automatic Responsiveness
Replace grid-template-columns with grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); to eliminate manual breakpoints. The grid will now create as many columns as will fit without dropping below 300px per column.
Benefits you get from the minmax() approach:
Columns automatically wrap when viewport narrows below the minimum threshold. No need to write multiple media queries for common screen sizes. Adjusting the minimum value (like 250px or 350px) changes when wrapping happens. auto-fit collapses empty columns and stretches filled ones to use all space. Works well for card grids, image galleries, and product listings where item count varies.
Pros & Cons of Making Responsive Layouts with CSS Grid
CSS Grid gives you precise two-dimensional control over layout with less code than older float or inline-block techniques. The built-in responsive functions reduce the need for complex calculations and framework classes.
Pros:
You get explicit control over rows, columns, and gaps in a single parent rule. repeat() and fractional units eliminate repetitive CSS and percentage math. minmax() and auto-fit enable automatic wrapping without media queries. Media queries can completely restructure the grid at any breakpoint. Grid handles both horizontal and vertical alignment cleanly. Fallback to single-column flow works in non-supporting browsers.
Cons:
Older browsers (pre-2017) require @supports checks or fallback layouts. Learning curve steeper than single-direction Flexbox for simple rows. Named grid areas add syntax complexity for beginners. Implicit grid behavior can surprise you if items exceed defined tracks.
Modern browsers (Chrome, Firefox, Safari, Edge) fully support CSS Grid. If you need to support Internet Explorer 11, test your layout in that browser and provide a single-column fallback inside an @supports not (display: grid) {} rule.
Understanding CSS Grid Containers for Responsive Layouts
Making an element a grid container requires display: grid; (or display: inline-grid; for inline-level grids). Once you set that property, all direct children become grid items and participate in the grid layout. The container’s grid-template-columns property defines how many columns exist and how wide each one is, while gap controls spacing between all tracks.
Rows auto-size based on content height unless you define grid-template-rows. For most responsive card grids, you skip explicit row definitions and let the browser add rows as needed when items wrap. This implicit row creation keeps markup flexible. Add or remove cards without updating CSS.
Main container-level properties:
display: grid activates grid formatting context
grid-template-columns defines column widths and count
gap sets space between columns and rows (replaces older grid-gap)
grid-template-rows optional explicit row heights
Understanding CSS Grid Items in Responsive Layouts
Grid items are the direct children of a grid container. By default, each item flows into the next available cell, filling columns left to right, then wrapping to a new row. You can override automatic placement by setting grid-column and grid-row, which reference numbered grid lines. A grid with three columns has four vertical lines (1, 2, 3, 4), so an item spanning columns one and two uses grid-column: 1 / 3; (start at line 1, end before line 3).
Spanning multiple cells works the same way vertically. If you want an item to cover two rows, use grid-row: 1 / 3; to start at the first row line and end before the third. When items are placed outside defined tracks, CSS Grid creates implicit rows or columns to accommodate them. Helpful for dynamic content but sometimes unexpected for beginners.
Typical item-level properties:
grid-column sets start and end column lines (shorthand for grid-column-start / grid-column-end)
grid-row sets start and end row lines
grid-area four-value shorthand (row-start, column-start, row-end, column-end)
justify-self aligns item horizontally within its cell
align-self aligns item vertically within its cell
Understanding Responsive Track Sizing in CSS Grid
Tracks are the columns and rows that make up the grid. Instead of pixel widths or percentages, CSS Grid introduces the fr unit, which represents a fraction of available space after fixed-size tracks are subtracted. Writing grid-template-columns: repeat(3, 1fr); creates three equal-width columns that grow and shrink together, distributing leftover space evenly.
The minmax() function sets a minimum and maximum size for a track. Using minmax(300px, 1fr) means each column will be at least 300px wide, but can grow beyond that to fill available space. Combine minmax() with repeat(auto-fit, ...) and the grid automatically calculates how many columns fit, wrapping items to new rows when the viewport narrows. This eliminates the need for manual breakpoints.
Real-world usage cases:
Equal-width card grids use repeat(3, 1fr) for three identical columns. Automatic wrapping galleries use repeat(auto-fit, minmax(250px, 1fr)) for flexible image grids. Sidebar layouts use 200px 1fr for a fixed sidebar and flexible main area. Form layouts use minmax(150px, 1fr) 2fr for label and input columns with different proportions.
Comparison of Responsive Grid Techniques
Different responsive methods offer trade-offs between control and automation. Manual breakpoints give precise layouts at specific screen sizes, while automatic wrapping reduces CSS but sacrifices exact column counts at mid-range widths.
| Technique | Pros | Cons |
|---|---|---|
| Manual breakpoints (600px, 900px) | Exact control over column count at each size; predictable reflow | More media queries; harder to maintain if design changes |
| minmax() + auto-fit | Automatic wrapping; minimal CSS; adapts to any screen size | Column count varies unpredictably; harder to control exact layout |
| Flexbox alternative | Simpler for single-row layouts; better browser support in older environments | Weak at two-dimensional alignment; requires wrapper elements for multi-row grids |
| 12-column systems | Familiar pattern from frameworks; spans any fraction (halves, thirds, quarters) | Requires utility classes; more markup; overkill for simple equal-width grids |
If you need exact layouts at specific breakpoints (like always three columns on desktop), use manual media queries. If you want automatic adaptation and don’t mind variable column counts at mid-range sizes, use minmax() with auto-fit. For one-dimensional rows where items don’t need to align across multiple rows, Flexbox remains simpler and sufficient.
How to Benefit from Building Responsive Layouts with CSS Grid
Responsive grids improve usability by adapting content to each device. Phones get single-column readability, tablets get two-column efficiency, and desktops get three or more columns to use wide screens effectively. Building a grid once and letting it reflow automatically saves time compared to writing separate mobile and desktop templates.
Grids also simplify pattern reuse. Once you’ve built a responsive card grid, you can apply the same CSS to product listings, team member profiles, blog post previews, or image galleries. Change the gap or minimum column width to adjust spacing and wrapping behavior without rewriting the layout logic.
Real-world benefits:
Faster page assembly. Drop content into grid items without custom positioning. Consistent spacing across all screen sizes through the gap property. Easier content updates. Add or remove items and the grid reflows automatically. Better performance than JavaScript-based masonry or column plugins. Clean markup. No extra wrapper divs or clearfix hacks. Scalable design system. Reuse grid classes across pages and projects.
Final Words
You just wired up a flexible card grid using display: grid, repeat(), fr units, and mobile-first breakpoints.
We covered the HTML structure, base grid styles, the 600px and 900px breakpoints, and the minmax(300px, 1fr) option that can reduce media queries.
If you followed along to make a responsive grid layout with CSS Grid step by step, you now have a reusable pattern that scales from one column to three. Tweak gaps or min widths and watch it respond. Nice work — you’ve built something practical and reusable.
FAQ
Q: What is a responsive grid layout and why use CSS Grid?
A: A responsive grid layout is a design that adapts column counts to screen size, and CSS Grid is ideal because it gives explicit control over rows, columns, gaps, and responsive tracks with minimal code.
Q: How do I make a responsive grid layout step by step?
A: To make a responsive grid layout step by step: create twelve card elements, set the parent to display: grid, use a mobile-first one-column default, then add breakpoints or minmax() for multiple columns.
Q: What are common breakpoints and how do I apply them?
A: Common breakpoints are 600px for two columns and 900px for three columns; apply them using media queries to change grid-template-columns at those widths for predictable column counts.
Q: How does minmax(300px, 1fr) compare to using manual breakpoints?
A: Using minmax(300px, 1fr) lets columns automatically size and wrap without explicit breakpoints, reducing media queries while keeping columns readable across many widths, though edge cases may need tweaks.
Q: When should I use auto-fit versus auto-fill?
A: Auto-fit collapses empty tracks so columns shrink to content, while auto-fill preserves empty tracks; use auto-fit when you want columns to fill available space and collapse cleanly as space changes.
Q: What are the core grid container properties I should know?
A: Core grid container properties are display: grid to enable the grid, grid-template-columns to define columns, gap to space items, and grid-auto-rows for implicit row sizing.
Q: How are grid items positioned and how do I span items?
A: Grid items are positioned with grid-column and grid-row referencing line numbers; you span items by specifying start and end lines, and placing items outside defined tracks creates implicit rows or columns.
Q: What does the fr unit do and how does repeat() help?
A: The fr unit represents a fractional share of available space; repeat() reduces repetition like repeat(3, 1fr) for equal columns, making equal-width, flexible tracks concise and readable.
Q: What are the main pros and cons of using CSS Grid for responsive layouts?
A: CSS Grid pros: precise two-dimensional control, simpler layout code, repeat/minmax utilities, and strong modern browser support. Cons: learning curve, older-browser fallbacks, and sometimes overkill for simple one-dimensional flows.
Q: How is browser support and what fallback should I use?
A: Browser support for CSS Grid is strong in current browsers; for older browsers use @supports checks, provide a Flexbox fallback, or serve a simpler stacked layout to ensure accessibility.
Q: When should I choose Grid versus Flexbox for responsive layouts?
A: Choose Grid for two-dimensional layouts and explicit column/row control; choose Flexbox for one-dimensional row or column flows. Combine them: Grid for page layout, Flexbox for alignment inside grid items.
