How to Create a Responsive Layout With CSS Grid
A click-and-code beginner guide to making cards/columns automatically reflow with CSS Grid.
By the end: You will build a grid that grows from one column to multiple columns without fixed device-specific widths.
You will build a grid that grows from one column to multiple columns without fixed device-specific widths.
Key terms before you start
These definitions make the steps easier to follow and help distinguish controls, files and concepts that can look similar at first.
What you need before starting
- A code editor
- A local/staging web page you are allowed to edit
- A modern browser with Developer Tools
Real-world notes from public discussions
These are tied to public discussions, not invented case studies. Open the source to read the full thread and surrounding replies.
A practical responsive-card answer uses repeat(auto-fit, minmax(..., 1fr)) so cards wrap as available width changes instead of relying on fixed percentage columns.
Step-by-step tutorial
Every step is shown below. Work through them in order and use each checkpoint to confirm the result before moving on.
Work on a local or staging copy
Open the project containing the HTML/CSS source. If this is a production site, use a staging copy or backup before structural changes.
A browser page is rendered from source files/CMS output; DevTools edits do not save back to the server.
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Open the page in a modern browser
Load the page, then press F12 or Ctrl+Shift+I (Windows/Linux) to open Developer Tools.
DevTools lets you inspect the DOM, applied CSS, computed sizes, requests and console errors.
Inspect specificity/order/inheritance in DevTools before adding !important.
Identify the parent and children
Wrap repeated items in one parent such as <div class="cards"> and give each item class="card".
Grid layout is applied to the parent; its direct children become grid items.
Turn the parent into a grid
Add .cards { display:grid; }.
display:grid creates a grid formatting context; it does not create useful columns until tracks are defined.
Inspect specificity/order/inheritance in DevTools before adding !important.
Add the column rule
Use grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));.
minmax sets a minimum item track size and 1fr shares remaining space; auto-fit creates as many tracks as fit.
Inspect specificity/order/inheritance in DevTools before adding !important.
Add gap
Use gap:1rem on the grid parent.
Gap creates spacing between tracks without edge-margin hacks.
Prevent content from forcing overflow
Set min-width:0 on grid items when long content/children otherwise force tracks wider.
Some content has intrinsic minimum sizes that can cause overflow.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Choose a deliberate max container width
If appropriate, wrap the grid in a container with width:min(...,100%) and auto margins.
Do not make every grid span the entire monitor simply because Grid can.
Add an explicit breakpoint only when needed
If a design needs a special layout at a specific content failure point, add @media (min-width:...).
Do not add 5 breakpoints before seeing a failure.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Use Grid overlay
In DevTools Elements/Layout, enable the grid overlay when available.
The overlay shows actual track lines and gaps.
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Test one, two and many cards
Temporarily test different item counts and long titles.
A robust grid should not require the exact demo content count.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Test the public/staging URL logged out
Open the final URL in a private/incognito window.
CMS/admin sessions can hide caching, permission or styling differences.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Document the changed file/rule
Record the file/template/component and purpose of the change in the project notes or version-control commit.
Future maintainers should not have to reverse-engineer why a rule exists.
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Test the rendered page, not only the source code.
Concrete examples
Copyable example
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: 1rem;
}
.card {
min-width: 0;
padding: 1rem;
border: 1px solid #e5e7eb;
border-radius: 1rem;
}Troubleshooting
Expected: DevTools edits are temporary. Copy the tested change into the real source/CMS and save it.
Test realistic/long content and fix intrinsic sizing/wrapping rather than designing around short demo text.
Inspect specificity/order/inheritance in DevTools before adding !important.
The change has a traceable reason/location.
Continue with these tutorials
Documentation and references
Use these primary and supporting sources to verify current controls, browser behavior and product-specific details.