What Is a Responsive Layout?
A responsive layout automatically adjusts its structure and appearance based on the screen size displaying it. The same HTML page looks great on a 27-inch desktop monitor, a tablet, and a phone — without separate codebases or redirects.
In this guide, you'll learn the essential CSS tools for building responsive layouts from scratch: Flexbox, CSS Grid, and media queries.
Step 1: Set the Viewport Meta Tag
Before writing a single line of CSS, add this tag inside your HTML <head>. Without it, mobile browsers will zoom out and render your page as a shrunken desktop version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">Step 2: Use Flexbox for One-Dimensional Layouts
Flexbox is perfect for arranging items in a single row or column. It's ideal for navigation bars, card rows, and centering content.
.nav {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}The flex-wrap: wrap property is key for responsiveness — it allows items to wrap onto a new line when there's not enough space.
Step 3: Use CSS Grid for Two-Dimensional Layouts
CSS Grid shines when you need both rows and columns — like a full page layout or a photo gallery.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}The auto-fit and minmax() combination is one of the most powerful responsive patterns in CSS. Cards will automatically reflow from 3 columns on desktop to 1 column on mobile — no media queries needed.
Step 4: Write Mobile-First Media Queries
Start with styles for the smallest screen, then add complexity as the screen grows. This is the mobile-first approach.
/* Base styles — mobile */
.sidebar {
display: none;
}
/* Tablet and up */
@media (min-width: 768px) {
.sidebar {
display: block;
width: 260px;
}
}Common Responsive Breakpoints
| Device | Min-Width |
|---|---|
| Mobile (portrait) | — (base) |
| Tablet | 768px |
| Small laptop | 1024px |
| Desktop | 1280px |
| Large desktop | 1536px |
Step 5: Use Relative Units
Avoid fixed pixel widths where possible. Use:
- % for widths relative to the parent
- rem for font sizes relative to the root
- vw / vh for sizes relative to the viewport
- clamp() for fluid type sizing
Next Steps
Once you're comfortable with these fundamentals, explore CSS frameworks like Tailwind CSS which provides utility classes that implement these same responsive patterns faster. But understanding the underlying CSS first ensures you can debug and customize anything a framework throws at you.