CSS Responsive Grid
Master CSS Grid for creating flexible, responsive layouts that adapt beautifully to any screen size
What is CSS Grid?
CSS Grid is a powerful two-dimensional layout system that allows you to create complex, responsive layouts with ease. Unlike Flexbox which is primarily one-dimensional, Grid can handle both rows and columns simultaneously, making it perfect for creating sophisticated page layouts.
With CSS Grid, you can create responsive designs that automatically adapt to different screen sizes without needing complex media queries or JavaScript. The grid system provides intuitive control over spacing, alignment, and item placement.
Key Benefits of CSS Grid:
- Two-dimensional control (rows and columns)
- Automatic responsive behavior with auto-fit and auto-fill
- Named grid areas for semantic layouts
- Flexible sizing with minmax() and fr units
- Easy alignment and spacing control
- No need for complex calculations or frameworks
- Works great with Flexbox for hybrid layouts
Common Use Cases:
- Card layouts that adapt to screen size
- Complex page layouts (header, sidebar, main, footer)
- Photo galleries and portfolio grids
- Dashboard layouts with multiple sections
- Form layouts with aligned fields
- Responsive navigation systems
Basic Grid Setup
Creating a CSS Grid starts with setting display: gridon a container, then defining the column and row structure.
/* Basic grid container */
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 3 columns */
grid-template-rows: auto auto auto; /* 3 rows */
gap: 20px; /* Space between items */
}
/* Grid items automatically flow into cells */
.grid-item {
background: #667eea;
padding: 20px;
border-radius: 8px;
}Basic Grid Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic CSS Grid</title>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto auto;
gap: 20px;
padding: 20px;
background: #f0f9ff;
}
.grid-item {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 20px;
border-radius: 8px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</body>
</html>Auto-fit & Responsive Grids
The real power of CSS Grid comes from auto-fit,auto-fill, andminmax() functions that create truly responsive grids without media queries.
auto-fit
Stretches grid items to fill the available space:
grid-template-columns:
repeat(auto-fit, minmax(250px, 1fr));
/* Items stretch to fill container */
auto-fill
Maintains item size and creates empty tracks:
grid-template-columns:
repeat(auto-fill, minmax(250px, 1fr));
/* Items keep size, empty tracks remain */
Auto-fit Responsive Grid Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive CSS Grid</title>
<style>
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
padding: 20px;
background: #f0f9ff;
}
.grid-item {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
padding: 30px;
border-radius: 12px;
text-align: center;
color: #1f2937;
font-weight: bold;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<h1 style="text-align: center; color: #1f2937; margin: 20px 0;">Responsive Grid with auto-fit</h1>
<p style="text-align: center; color: #6b7280; margin-bottom: 30px;">Resize the browser to see items adapt automatically</p>
<div class="responsive-grid">
<div class="grid-item">Card 1</div>
<div class="grid-item">Card 2</div>
<div class="grid-item">Card 3</div>
<div class="grid-item">Card 4</div>
<div class="grid-item">Card 5</div>
<div class="grid-item">Card 6</div>
</div>
</body>
</html>Grid Template Areas
Grid template areas allow you to create semantic, named layouts that are easy to understand and maintain. You can visualize your layout structure directly in the CSS.
/* Define the layout structure */
.layout-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
gap: 20px;
}
/* Assign elements to areas */
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }
Responsive Grid Areas:
You can reorganize grid areas at different breakpoints by redefining the template:
@media (max-width: 768px) {
.layout-grid {
grid-template-areas:
"header"
"main"
"sidebar"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
Complete Layout with Grid Areas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Grid Layout System</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.layout-grid {
display: grid;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
gap: 20px;
padding: 20px;
}
.header {
grid-area: header;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
color: white;
padding: 30px;
border-radius: 12px;
text-align: center;
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(45deg, #55efc4, #00cec9);
color: white;
padding: 20px;
border-radius: 12px;
}
.main {
grid-area: main;
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.aside {
grid-area: aside;
background: linear-gradient(45deg, #fd79a8, #e84393);
color: white;
padding: 20px;
border-radius: 12px;
}
.footer {
grid-area: footer;
background: linear-gradient(45deg, #636e72, #2d3436);
color: white;
padding: 20px;
border-radius: 12px;
text-align: center;
}
/* Responsive behavior */
@media (max-width: 768px) {
.layout-grid {
grid-template-areas:
"header"
"main"
"sidebar"
"aside"
"footer";
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="layout-grid">
<header class="header">
<h1>Header Section</h1>
<p>This spans across all columns</p>
</header>
<nav class="sidebar">
<h3>Sidebar</h3>
<ul style="list-style: none; margin-top: 15px;">
<li style="margin-bottom: 8px;"><a href="#" style="color: white; text-decoration: none;">Navigation Item 1</a></li>
<li style="margin-bottom: 8px;"><a href="#" style="color: white; text-decoration: none;">Navigation Item 2</a></li>
<li style="margin-bottom: 8px;"><a href="#" style="color: white; text-decoration: none;">Navigation Item 3</a></li>
</ul>
</nav>
<main class="main">
<h2>Main Content Area</h2>
<p>This is the main content area. It takes up the remaining space in the middle column. CSS Grid makes it incredibly easy to create complex layouts like this one.</p>
<p style="margin-top: 15px;">Try resizing your browser window to see how the layout adapts to smaller screens using CSS Grid and media queries.</p>
<div style="margin-top: 20px; padding: 20px; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;">
<strong>Grid Template Areas:</strong> This layout uses named grid areas to create a semantic and maintainable grid structure.
</div>
</main>
<aside class="aside">
<h3>Aside</h3>
<p style="margin-top: 10px; font-size: 0.9em;">This is a sidebar area for additional content, ads, or widgets.</p>
</aside>
<footer class="footer">
<p>© 2024 CSS Grid Layout Demo</p>
</footer>
</div>
</body>
</html>Grid Units and Functions
CSS Grid provides several specialized units and functions that make creating flexible, responsive layouts much easier.
fr Unit
Fractional unit that distributes available space:
1fr 2fr 1fr
/* 1:2:1 ratio */
minmax()
Sets minimum and maximum size constraints:
minmax(200px, 1fr)
/* Min 200px, max flexible */
repeat()
Repeats a pattern of tracks:
repeat(3, 1fr)
/* Same as 1fr 1fr 1fr */
auto
Sizes based on content:
auto 1fr auto
/* Content-based sizing */
fit-content()
Clamps content to a maximum:
fit-content(300px)
/* Max 300px, based on content */
auto-fit/fill
Responsive track creation:
repeat(auto-fit, 200px)
/* Responsive columns */
Advanced Grid Techniques
Implicit Grid
When you have more items than defined grid tracks, CSS Grid creates implicit tracks automatically.
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Only 3 columns defined */
grid-auto-rows: 200px; /* Height for implicit rows */
gap: 1rem;
}
/* Items 4, 5, 6... will create new rows automatically */
Grid Item Placement
You can explicitly place items using line numbers, span keyword, or named areas.
/* Method 1: Line numbers */
.item {
grid-column: 2 / 4; /* From line 2 to line 4 */
grid-row: 1 / 3; /* Spans 2 rows */
}
/* Method 2: Span keyword */
.item {
grid-column: span 2; /* Spans 2 columns */
grid-row: span 3; /* Spans 3 rows */
}
Dense Grid Packing
Use grid-auto-flow: dense to fill gaps in your grid automatically.
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-flow: dense; /* Fill gaps automatically */
gap: 1rem;
}
/* Some items span multiple cells */
.wide-item { grid-column: span 2; }
.tall-item { grid-row: span 2; }
Complete Responsive Grid System
Advanced Grid Layout with All Features
This example demonstrates multiple grid techniques including auto-fit, grid areas, responsive behavior, and advanced positioning.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complete CSS Grid Responsive System</title>
<style>
:root {
--primary-color: #4f46e5;
--secondary-color: #7c3aed;
--accent-color: #ec4899;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--info-color: #06b6d4;
--dark-color: #1f2937;
--light-color: #f9fafb;
--text-color: #374151;
--border-color: #e5e7eb;
--border-radius: 0.75rem;
--shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-lg: 0 20px 25px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-color);
background: linear-gradient(135deg, var(--light-color) 0%, #ffffff 100%);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
h1, h2, h3 {
color: var(--dark-color);
margin-bottom: 1rem;
}
h1 {
font-size: 2.5rem;
text-align: center;
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
}
.section {
margin-bottom: 3rem;
background: white;
padding: 2rem;
border-radius: var(--border-radius);
box-shadow: var(--shadow);
}
/* Basic Grid */
.basic-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1.5rem 0;
}
.grid-item {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
text-align: center;
font-weight: 600;
transition: var(--transition);
}
.grid-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Auto-fit Grid */
.auto-fit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 1.5rem 0;
}
.auto-fit-item {
background: linear-gradient(135deg, var(--success-color), var(--info-color));
color: white;
padding: 2rem;
border-radius: var(--border-radius);
text-align: center;
font-weight: 600;
min-height: 150px;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.auto-fit-item:hover {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
/* Complex Layout Grid */
.complex-grid {
display: grid;
grid-template-areas:
"hero hero hero"
"feature-1 feature-2 feature-3"
"content content sidebar"
"footer footer footer";
grid-template-columns: 1fr 1fr 300px;
grid-template-rows: 200px auto 1fr auto;
gap: 1.5rem;
margin: 1.5rem 0;
min-height: 600px;
}
.hero-section {
grid-area: hero;
background: linear-gradient(135deg, var(--warning-color), var(--accent-color));
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--border-radius);
font-size: 1.5rem;
font-weight: bold;
}
.feature-card {
padding: 1.5rem;
background: white;
border-radius: var(--border-radius);
border: 2px solid var(--border-color);
transition: var(--transition);
text-align: center;
}
.feature-card:hover {
border-color: var(--primary-color);
box-shadow: var(--shadow-lg);
}
.feature-1 { grid-area: feature-1; }
.feature-2 { grid-area: feature-2; }
.feature-3 { grid-area: feature-3; }
.content-area {
grid-area: content;
background: white;
padding: 2rem;
border-radius: var(--border-radius);
border: 2px solid var(--border-color);
}
.sidebar-area {
grid-area: sidebar;
background: linear-gradient(135deg, var(--info-color), var(--primary-color));
color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
}
.footer-area {
grid-area: footer;
background: var(--dark-color);
color: white;
padding: 1.5rem;
border-radius: var(--border-radius);
text-align: center;
}
/* Card Grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
margin: 2rem 0;
}
.card {
background: white;
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
}
.card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.card-header {
height: 200px;
background: linear-gradient(135deg, var(--accent-color), var(--danger-color));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.25rem;
font-weight: bold;
}
.card-content {
padding: 1.5rem;
}
.card-title {
font-size: 1.25rem;
font-weight: bold;
margin-bottom: 0.5rem;
}
.card-description {
color: #6b7280;
margin-bottom: 1rem;
}
.card-button {
background: var(--primary-color);
color: white;
border: none;
padding: 0.75rem 1.5rem;
border-radius: calc(var(--border-radius) / 2);
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.card-button:hover {
background: var(--secondary-color);
}
/* Masonry-like Grid */
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.masonry-item {
background: white;
border-radius: var(--border-radius);
padding: 1.5rem;
box-shadow: var(--shadow);
border-left: 4px solid;
}
.masonry-item:nth-child(1) { border-left-color: var(--primary-color); }
.masonry-item:nth-child(2) { border-left-color: var(--success-color); }
.masonry-item:nth-child(3) { border-left-color: var(--warning-color); }
.masonry-item:nth-child(4) { border-left-color: var(--danger-color); }
.masonry-item:nth-child(5) { border-left-color: var(--info-color); }
.masonry-item:nth-child(6) { border-left-color: var(--accent-color); }
.masonry-tall { grid-row: span 2; }
.masonry-wide { grid-column: span 2; }
/* Responsive Behavior */
@media (max-width: 1024px) {
.complex-grid {
grid-template-areas:
"hero hero"
"feature-1 feature-2"
"feature-3 feature-3"
"content content"
"sidebar sidebar"
"footer footer";
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.basic-grid {
grid-template-columns: repeat(2, 1fr);
}
.complex-grid {
grid-template-areas:
"hero"
"feature-1"
"feature-2"
"feature-3"
"content"
"sidebar"
"footer";
grid-template-columns: 1fr;
grid-template-rows: repeat(7, auto);
}
.masonry-wide {
grid-column: span 1;
}
}
@media (max-width: 480px) {
.basic-grid {
grid-template-columns: 1fr;
}
.container {
padding: 10px;
}
h1 {
font-size: 2rem;
}
.section {
padding: 1rem;
}
}
.breakpoint-indicator {
position: fixed;
top: 20px;
right: 20px;
background: var(--dark-color);
color: white;
padding: 0.5rem 1rem;
border-radius: var(--border-radius);
font-family: monospace;
font-size: 0.75rem;
z-index: 1000;
box-shadow: var(--shadow);
}
</style>
</head>
<body>
<div class="breakpoint-indicator" id="breakpoint">Breakpoint</div>
<div class="container">
<h1>CSS Grid Responsive System</h1>
<div class="section">
<h2>Basic Grid Layout</h2>
<p>A simple three-column grid that adapts to different screen sizes.</p>
<div class="basic-grid">
<div class="grid-item">Item 1</div>
<div class="grid-item">Item 2</div>
<div class="grid-item">Item 3</div>
<div class="grid-item">Item 4</div>
<div class="grid-item">Item 5</div>
<div class="grid-item">Item 6</div>
</div>
</div>
<div class="section">
<h2>Auto-Fit Responsive Grid</h2>
<p>Items automatically adjust and wrap based on available space using <code>auto-fit</code> and <code>minmax()</code>.</p>
<div class="auto-fit-grid">
<div class="auto-fit-item">Responsive Card 1</div>
<div class="auto-fit-item">Responsive Card 2</div>
<div class="auto-fit-item">Responsive Card 3</div>
<div class="auto-fit-item">Responsive Card 4</div>
<div class="auto-fit-item">Responsive Card 5</div>
</div>
</div>
<div class="section">
<h2>Complex Layout with Grid Areas</h2>
<p>A complete layout using named grid areas that reorganizes on different screen sizes.</p>
<div class="complex-grid">
<div class="hero-section">Hero Section</div>
<div class="feature-card feature-1">
<h3>Feature 1</h3>
<p>Description of the first feature</p>
</div>
<div class="feature-card feature-2">
<h3>Feature 2</h3>
<p>Description of the second feature</p>
</div>
<div class="feature-card feature-3">
<h3>Feature 3</h3>
<p>Description of the third feature</p>
</div>
<div class="content-area">
<h3>Main Content</h3>
<p>This is the main content area. It adapts its position and size based on the screen size, demonstrating the power of CSS Grid for complex layouts.</p>
</div>
<div class="sidebar-area">
<h3>Sidebar</h3>
<p>Additional content and navigation items.</p>
</div>
<div class="footer-area">
<p>© 2024 Grid Layout Demo</p>
</div>
</div>
</div>
<div class="section">
<h2>Card Grid System</h2>
<p>A flexible card layout that adapts the number of columns based on screen size.</p>
<div class="card-grid">
<div class="card">
<div class="card-header">Card Image 1</div>
<div class="card-content">
<div class="card-title">Card Title 1</div>
<div class="card-description">This is a description of the first card with some sample content.</div>
<button class="card-button">Learn More</button>
</div>
</div>
<div class="card">
<div class="card-header">Card Image 2</div>
<div class="card-content">
<div class="card-title">Card Title 2</div>
<div class="card-description">This is a description of the second card with different content.</div>
<button class="card-button">Learn More</button>
</div>
</div>
<div class="card">
<div class="card-header">Card Image 3</div>
<div class="card-content">
<div class="card-title">Card Title 3</div>
<div class="card-description">This is a description of the third card showcasing variety.</div>
<button class="card-button">Learn More</button>
</div>
</div>
</div>
</div>
<div class="section">
<h2>Masonry-like Grid</h2>
<p>Items with varying heights using grid-row span for a masonry-like effect.</p>
<div class="masonry-grid">
<div class="masonry-item">
<h3>Regular Item</h3>
<p>This is a regular item with standard height.</p>
</div>
<div class="masonry-item masonry-tall">
<h3>Tall Item</h3>
<p>This item spans two rows, creating visual interest and hierarchy in the layout.</p>
<p>Additional content makes this item taller than the others.</p>
</div>
<div class="masonry-item">
<h3>Another Item</h3>
<p>Standard height item with different content.</p>
</div>
<div class="masonry-item masonry-wide">
<h3>Wide Item</h3>
<p>This item spans two columns on larger screens, showcasing grid flexibility.</p>
</div>
<div class="masonry-item">
<h3>Final Item</h3>
<p>The last item in our masonry-like grid demonstration.</p>
</div>
</div>
</div>
</div>
<script>
function updateBreakpointIndicator() {
const width = window.innerWidth;
const indicator = document.getElementById('breakpoint');
if (width >= 1200) {
indicator.textContent = "Desktop (≥1200px)";
} else if (width >= 1024) {
indicator.textContent = "Large Tablet (≥1024px)";
} else if (width >= 768) {
indicator.textContent = "Tablet (≥768px)";
} else if (width >= 480) {
indicator.textContent = "Mobile (≥480px)";
} else {
indicator.textContent = "Small Mobile (<480px)";
}
}
updateBreakpointIndicator();
window.addEventListener('resize', updateBreakpointIndicator);
</script>
</body>
</html>Best Practices
✅ Do
- Use auto-fit/auto-fill for responsive card layouts
- Name your grid areas for complex layouts
- Combine Grid with Flexbox when appropriate
- Use fr units for flexible sizing
- Test on various screen sizes and devices
- Use minmax() for flexible minimum sizes
- Consider accessibility with logical flow
❌ Don't
- Overuse explicit grid line placement
- Create overly complex grid structures
- Forget about mobile-first design
- Rely solely on Grid for all layouts
- Ignore the implicit grid behavior
- Use Grid for simple one-dimensional layouts
- Forget to test on older browsers if needed
Master CSS Grid Today!
Experiment with our comprehensive grid examples that showcase auto-fit behavior, grid template areas, and responsive design patterns. See how your layouts adapt in real-time as you resize the browser!