RWD Grid View
A responsive grid view scales from one column on mobile to many on desktop. CSS Grid does this in three lines without any framework.
Responsive grids
EXAMPLE
/* The auto-fit grid - the modern single-line responsive grid */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
/*
* auto-fit: fills the row, collapsing empty tracks
* minmax: each column is at least 220px, growing to 1fr (equal share)
* gap: space between cells
*/
/* Example markup */
<div class='grid'>
<article>Card 1</article>
<article>Card 2</article>
<article>Card 3</article>
<article>Card 4</article>
<article>Card 5</article>
</div>
/* Card styling */
article {
background: white;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* Classic mobile-first media query grid */
.grid-mq {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 768px) { .grid-mq { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-mq { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .grid-mq { grid-template-columns: repeat(4, 1fr); } }
/* Container queries - even better, react to the container's width */
@container (min-width: 600px) { .grid { grid-template-columns: 1fr 1fr; } }
.outer { container-type: inline-size; }
/* Span items - control individual cell width / height */
.feature {
grid-column: span 2; /* takes 2 columns */
}
.tall {
grid-row: span 2;
}
/* Subgrid - children of a grid use the parent's tracks */
.parent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.child { display: grid; grid-template-columns: subgrid; }
/* Bonus: dense packing - fills gaps automatically */
.masonry-ish {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-flow: dense;
gap: 1rem;
}
Why it matters
auto-fit + minmax replaces 90 percent of media queries for grids. Container queries are the right answer for component-level responsiveness. CSS Grid is mature enough that you almost never need a framework for layout in 2026.
Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.
Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>RWD Grid View</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Auto-fit as many 260px columns as will fit.
.grid { grid-template-columns: repeat(
, minmax(260px, 1fr)); }
Collapses empty tracks.
Discussion
Loading…