RWD Simple Grid
A simple responsive grid lays content out in side-by-side columns on wide screens and automatically stacks those same columns into a single column on narrow screens.
What a Responsive Grid Does
Most page layouts are really just boxes arranged in rows and columns: a header, a few content columns side by side, and a footer. A responsive grid is simply a way of arranging those boxes so that on a wide screen they sit next to each other, and on a narrow screen (like a phone, where there isn't room for three columns side by side) they stack on top of each other instead. You don't need a heavy framework to do this, flexbox alone is enough to build a simple, solid grid.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.row {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.col {
flex: 1 1 200px;
background: #eee;
padding: 16px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</body>
</html>The key property here is flex-wrap: wrap combined with flex: 1 1 200px on each column. flex: 1 1 200px means each column would prefer to be at least 200px wide, but is allowed to grow (the first 1) or shrink (the second 1) to share the available space with its siblings. When the row is wide enough for all three columns to be at least 200px each, they sit side by side. When the browser gets too narrow to fit three 200px columns plus the gaps, flex-wrap: wrap lets the extra columns drop down onto a new line automatically, with no media query required for this basic stacking behavior.
- display: flex turns the row into a flex container
- flex-wrap: wrap allows children to move to a new line when they don't fit
- flex: 1 1 200px sets a flexible base width of 200px per column that can grow or shrink
- gap adds consistent spacing between columns and rows without extra margin hacks
A Simple Float-Based Grid (Legacy Technique)
Before flexbox and CSS grid were widely supported, developers built grids using the float property, which was originally intended for wrapping text around images. Floated columns are taken out of normal document flow and pushed to one side, letting several of them line up horizontally. This technique still appears in older codebases, so it's worth recognizing even though flexbox and CSS grid are the better choice for anything new today.
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.row::after {
content: "";
display: table;
clear: both;
}
.col-float {
float: left;
width: 33.33%;
box-sizing: border-box;
padding: 16px;
}
</style>
</head>
<body>
</body>
</html>- Wrap your columns in a single row container
- Set display: flex and flex-wrap: wrap on the row
- Give each column a flex-basis like 200px so browsers know when to wrap them
- Add a gap for spacing instead of manual margins
- Resize the browser to confirm columns stack cleanly at narrow widths
