How to Create a Responsive Grid in CSS
Learn to build responsive grid layouts with CSS Grid and Flexbox. Step-by-step tutorial with live interactive demos.
What is a Responsive Grid?
A responsive grid automatically adjusts the number of columns based on screen size. Modern CSS gives us powerful tools to create grids that:
- Auto-adjust columns - Automatically change from 4 to 3 to 2 to 1 columns as space decreases
- No media queries needed - Using auto-fit and minmax() for fluid layouts
- Maintain minimum sizes - Items never shrink below a readable width
- Fill available space - Items expand to use all available width
Resize your browser to see the grid adapt
Step-by-Step Tutorial
Follow these 6 steps to master responsive CSS grids. Click any code block to copy.
Basic Grid Setup
Start by applying display: grid to your container.
Define Columns with repeat()
Use grid-template-columns with repeat() to define your columns.
Make it Responsive with minmax()
The magic happens with minmax(). Combined with auto-fit, columns wrap automatically!
auto-fit vs auto-fill Explained
auto-fit collapses empty tracks so items stretch. auto-fill keeps empty tracks.
Add Gap and Alignment
Use the gap property for consistent spacing between items.
Grid Areas for Complex Layouts
For complex layouts like dashboards, use grid-template-areas to create named regions.
Live Interactive Demo
Drag the slider to resize the container and see how the grid responds.
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr))
auto-fit vs auto-fill Comparison
See the difference between auto-fit and auto-fill with fewer items than can fill the container.
auto-fitItems stretch to fill space
Empty tracks collapse, items expand
auto-fillEmpty tracks preserved
Track sizes stay consistent
Multiple Approaches
There are several ways to create responsive grids. Each has its use cases.
CSS Grid with Media Queries
Preview
Resize browser to see breakpoint changes
Tailwind CSS Examples
Here are the same techniques using Tailwind CSS utility classes.
Auto-fit with Arbitrary Values
Use arbitrary values for auto-fit + minmax in Tailwind
Responsive Breakpoints
Use Tailwind responsive prefixes for specific column counts
Flexbox Grid
Use flex utilities for a responsive flexbox grid
Common Grid Patterns
Real-world examples you can use in your projects.
Card Grid (1-2-3-4 Columns)
Preview
Browser Support
CSS Grid is Fully Supported
CSS Grid has excellent browser support (97%+ globally). You can use it confidently in production.
Chrome
57+
Firefox
52+
Safari
10.1+
Edge
16+
Opera
44+
Frequently Asked Questions
auto-fit collapses empty tracks to zero width, allowing items to stretch and fill available space. auto-fill keeps empty tracks, maintaining their size even when there aren't enough items to fill them. Use auto-fit when you want items to expand, and auto-fill when you want consistent track sizes regardless of content.
minmax() sets a minimum and maximum size for grid tracks. For example, minmax(250px, 1fr) means the column will be at least 250px wide but can grow to fill available space (1fr). It's essential for creating responsive grids that adapt to different screen sizes without media queries.
Use CSS Grid for two-dimensional layouts (rows AND columns) like card grids, dashboards, and page layouts. Use Flexbox for one-dimensional layouts (either row OR column) like navigation bars, centering content, or distributing items in a single line. Many modern layouts use both together.
Use CSS Grid with repeat(auto-fit, minmax(min-size, 1fr)). This creates columns that automatically adjust based on available space. Items will wrap to new rows when they can't fit, and expand to fill space when there's room. No media queries needed for basic responsive behavior.
The fr (fraction) unit represents a fraction of available space in the grid container. If you have grid-template-columns: 1fr 2fr, the second column gets twice the space of the first. It's like flex-grow in Flexbox but for grid tracks.
More CSS Tutorials
Copy CSS from Website
Extract styles with 2 clicks
Center a Div (CSS)
Flexbox, Grid, and more
Center a Div (Tailwind)
Utility classes for centering
Convert CSS to Tailwind
CSS to utility classes
Glassmorphism Effect
Frosted glass UI style
Neumorphism Button
Soft UI button design
Responsive Navbar
Mobile-friendly navigation
Sticky Header
Fixed navigation on scroll
CSS Pagination
Page navigation styles
CSS Accordion
Expandable content sections
Dropdown Menu
Hover and click dropdowns
CSS Modal
Popup dialog boxes
Toast Notifications
Animated alert messages
Hamburger Menu
Animated menu icon
Animate Gradients
Moving gradient backgrounds
Skeleton Loader
Loading placeholder UI
Element Screenshot
Capture any element as image
Pick Color from Website
Eyedropper tool comparison
Identify Fonts
Find fonts on any website
Download All Images
Bulk save images from any site
Measure Elements
Page ruler and measurements
Extract Colors from Website
Get any color palette instantly
Dark Mode Toggle
CSS variables and localStorage
Center Text in CSS
text-align, Flexbox, and Grid
Make Text Bold
font-weight values explained
Add Shadow in CSS
box-shadow, text-shadow, drop-shadow
Round Corners in CSS
border-radius and pill shapes
Style File Input
Custom upload buttons