CSS RWD Grid View
In this page:
* {
box-sizing: border-box;
}
.column {
width: percentage;
float: left;
}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.
- Accepted values:
- width: 25% — four columns
- width: 33.33% — three columns
- width: 50% — two columns
- width: 100% — one column
- box-sizing: border-box — keeps padding inside the width
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.
- Accepted values:
- display: flex — makes a row
- flex-wrap: wrap — allows wrapping
- flex: 1 1 <basis> — flexible columns
- gap: <length> — gutters
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.
- Accepted values:
- display: grid — makes a grid
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) — responsive columns
- gap: <length> — gutters
- grid-column: span <n> — column spans
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>- Using widths that add up to more than 100% once padding and border are included, so columns wrap; use
box-sizing: border-box. - Forgetting to clear floats in a float based grid, so the parent collapses.
- Using fixed pixel column widths instead of percentages or
frunits.
Supported in all modern browsers: Chrome, Firefox, Safari, Edge and Opera.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: