CSS RWD Grid View
In this page:
What a Responsive Grid View Is
A responsive grid view arranges content into a set number of fluid columns that reflow -- stacking, wrapping, or resizing -- as the viewport changes, rather than a rigid pixel grid that stays the same width regardless of screen size.
Example: What a Responsive Grid View Is
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.row div {
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>Percentage Based Columns
The classic approach divides a row into percentage-width columns (e.g. three columns at 33.33% each) using float or inline-block, so the columns automatically shrink together as the container shrinks, though they still need a breakpoint to stack on very small screens.
Example: Percentage Based Columns
<style>
.row {
overflow: hidden;
}
.col {
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 10px;
color: white;
}
.col:nth-child(1) { background: coral; }
.col:nth-child(2) { background: seagreen; }
.col:nth-child(3) { background: steelblue; }
</style>
<div class="row">
<div class="col">33.33%</div>
<div class="col">33.33%</div>
<div class="col">33.33%</div>
</div>Flexbox Based Grid View
A flex container with flex-wrap: wrap and items given a flex-basis percentage or fixed minimum width produces a self-adjusting grid where columns wrap onto new rows automatically once they no longer fit, without any explicit breakpoint math.
Example: Flexbox Based Grid View
<style>
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex-basis: 200px;
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
</style>
<div class="row">
<div class="col">Wraps automatically</div>
<div class="col" style="background: seagreen;">Wraps automatically</div>
</div>CSS Grid Based Grid View
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) builds a grid view that fits as many 200px-minimum columns as the row allows and stretches them evenly to fill remaining space -- often needing zero media queries at all.
Example: CSS Grid Based Grid View
<style>
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 8px;
}
.grid div {
background: steelblue;
color: white;
padding: 12px;
}
</style>
<div class="grid">
<div>Card</div>
<div style="background: seagreen;">Card</div>
</div>Choosing Between the Approaches
Percentage floats are largely legacy at this point; flexbox suits single-row or single-column flows like card grids and toolbars, while CSS Grid suits genuinely two-dimensional layouts (rows AND columns both need explicit control) like a full page shell or dashboard.
Example: Choosing Between the Approaches
<style>
.cards {
display: flex;
flex-wrap: wrap;
}
.cards div {
background: steelblue;
color: white;
padding: 10px;
margin: 4px;
}
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 10px;
}
.dashboard div {
background: seagreen;
color: white;
padding: 10px;
}
</style>
<div class="cards">
<div>Card row: Flexbox</div>
</div>
<div class="dashboard">
<div>Two-dimensional shell: Grid</div>
</div>Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: