Responsive Layouts With Flex and Grid
Switch between column and row layouts at different breakpoints using responsive prefixes like md:flex-row and lg:grid-cols-3.
Responsive Layouts With Flex and Grid is a free Tailwind CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Tailwind CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Responsive Layout Fundamentals
The two most important layout techniques in Tailwind — Flexbox and Grid — both compose naturally with responsive breakpoint prefixes. The core idea is simple: define the mobile layout first with unprefixed utilities, then add breakpoint-prefixed overrides to change the layout at larger screens. Understanding how to switch between flex and grid, and how to change their key properties at breakpoints, gives you the tools to build any responsive design.
<!-- Core pattern: column on mobile, row on desktop -->
<div class="flex flex-col lg:flex-row gap-6">
<aside class="w-full lg:w-64 shrink-0">Sidebar</aside>
<main class="flex-1">Main content</main>
</div>flex-col to flex-row at Breakpoints
The most frequently used responsive flex pattern is toggling direction. flex flex-col md:flex-row stacks children vertically on phones and arranges them horizontally on tablets. Apply this to hero sections (text above image on mobile, side-by-side on desktop), feature rows, and comparison cards. The children maintain their natural height in column mode and stretch to match height in row mode.
<!-- Hero: stacked on mobile, side by side on desktop -->
<div class="flex flex-col md:flex-row items-center gap-8 px-6 py-12">
<!-- Text block -->
<div class="flex-1 text-center md:text-left">
<h1 class="text-3xl md:text-4xl font-bold mb-4">Build Better Apps</h1>
<p class="text-gray-600 mb-6">Everything you need to ship fast.</p>
<button class="bg-blue-600 text-white px-6 py-3 rounded-lg">Get Started</button>
</div>
<!-- Image -->
<div class="flex-1 w-full md:w-auto">
<div class="aspect-video bg-gradient-to-br from-blue-400 to-indigo-600 rounded-2xl"></div>
</div>
</div>Responsive Grid Column Counts
For content grids, the pattern is almost always increasing column count at larger breakpoints. Start with a single column on mobile for full readability, add a second column on small tablets, and reach the full column count on desktop. grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 is the archetypal pattern for product listings, team member grids, and content card libraries.
<!-- Responsive card grid: 1→2→3→4 columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 1</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 2</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 3</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 4</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 5</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 6</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 7</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">Card 8</div>
</div>Responsive Column Spans
Within a fixed-column grid, responsive col-span values let specific items take up different amounts of space at different breakpoints. A featured card might span all 4 columns on desktop but collapse to a single column on mobile. The pattern col-span-1 sm:col-span-2 lg:col-span-4 creates this behavior — the item is normal-sized on mobile and expands progressively with screen size.
<!-- Featured item spans all columns on large screens -->
<div class="grid grid-cols-4 gap-4">
<!-- Featured: full width on large, half on sm, 1 on mobile -->
<div class="col-span-4 sm:col-span-2 lg:col-span-4 bg-blue-500 text-white p-6 rounded-xl">
Featured Content
</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">A</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">B</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">C</div>
<div class="col-span-2 sm:col-span-1 bg-gray-100 p-4 rounded-xl">D</div>
</div>Responsive Gap Sizing
Gaps between flex or grid children should also be responsive. Tight gaps work on mobile where space is limited, but wider gaps on desktop improve visual breathing room. gap-3 md:gap-6 lg:gap-10 scales the gutter progressively. Responsive gap sizing is especially important in marketing section grids where whitespace is a key design element.
<!-- Gap scales with viewport -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 md:gap-6 lg:gap-10">
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">🎨</div>
<h3 class="font-semibold">Design</h3>
</div>
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">⚙️</div>
<h3 class="font-semibold">Build</h3>
</div>
<div class="bg-purple-100 p-4 rounded-xl text-center">
<div class="text-3xl mb-2">🚀</div>
<h3 class="font-semibold">Launch</h3>
</div>
</div>Switching Between flex and grid at Breakpoints
You can switch the display type itself at breakpoints by going from flex to grid. This is unusual but can be useful: a horizontal flex row on mobile (for a navigation pill bar) becomes a grid on desktop (for a feature overview). The trick is that you cannot mix flex and grid classes on the same element — the later class wins, and they both set display.
<!-- Horizontal scroll on mobile, grid on desktop -->
<!-- Mobile: flex row with overflow scroll -->
<div class="flex gap-3 overflow-x-auto pb-2 md:grid md:grid-cols-4 md:overflow-visible">
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">📊</div>
<div class="text-sm font-medium mt-1">Analytics</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">💬</div>
<div class="text-sm font-medium mt-1">Chat</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">📁</div>
<div class="text-sm font-medium mt-1">Files</div>
</div>
<div class="flex-none w-40 md:w-auto bg-white border rounded-xl p-4 text-center">
<div class="text-2xl">⚙️</div>
<div class="text-sm font-medium mt-1">Settings</div>
</div>
</div>Responsive Justify and Align
Alignment properties also benefit from responsive prefixes. Content might be centered on mobile and left-aligned on desktop. text-center md:text-left is the classic example. For flex containers, justify-center md:justify-between centers items on mobile but spreads them to the edges on desktop — ideal for a navigation bar that collapses to centered pills on mobile.
<!-- CTA section: centered on mobile, spaced on desktop -->
<div class="flex flex-col sm:flex-row items-center sm:justify-between gap-4 bg-indigo-50 rounded-2xl p-6">
<div class="text-center sm:text-left">
<h3 class="font-bold text-lg">Ready to start?</h3>
<p class="text-gray-600 text-sm">Join 10,000+ users today.</p>
</div>
<div class="flex gap-3">
<button class="bg-indigo-600 text-white px-5 py-2 rounded-lg">Get Started</button>
<button class="border border-indigo-300 text-indigo-700 px-5 py-2 rounded-lg">Learn More</button>
</div>
</div>Responsive Order of Items
Tailwind's order-* utilities change the visual order of flex and grid children without changing the DOM order. This allows the text content to come first in HTML (better for SEO and screen readers) while the image appears first visually on desktop using lg:-order-1 or lg:order-first. Responsive order is a powerful tool for content-first HTML that still achieves design-first visual layouts.
<!-- Image appears first on desktop via responsive order -->
<div class="flex flex-col lg:flex-row gap-8 items-center">
<!-- Text: first in DOM, second visually on desktop -->
<div class="lg:order-2 flex-1 text-center lg:text-left">
<h2 class="text-2xl font-bold mb-3">Our Approach</h2>
<p class="text-gray-600">We believe in human-centered design that prioritizes clarity and performance.</p>
</div>
<!-- Image: second in DOM, first visually on desktop -->
<div class="lg:order-1 flex-1">
<div class="aspect-video bg-gradient-to-br from-teal-400 to-emerald-600 rounded-2xl"></div>
</div>
</div>Auto-Fit Responsive Columns
For truly fluid grids that create as many columns as fit, combine Tailwind's arbitrary values with CSS Grid's auto-fill or auto-fit. This approach needs no breakpoints — the grid itself decides column count based on available space and minimum item width. grid-cols-[repeat(auto-fill,minmax(240px,1fr))] creates a self-adapting grid where items are at least 240px wide.
<!-- Self-adapting grid: no breakpoints needed -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))">
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 1</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 2</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 3</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
<div class="bg-white border rounded-xl p-4 shadow-sm">
<h3 class="font-semibold">Auto Item 4</h3>
<p class="text-sm text-gray-500 mt-1">Adapts to available space</p>
</div>
</div>Responsive Sidebar Layouts
App shell layouts with sidebars need responsive handling: the sidebar stacks below the content on mobile and sits alongside it on desktop. The pattern is a flex container that goes column-to-row: flex flex-col lg:flex-row. The sidebar gets a fixed width on desktop: w-full lg:w-64 shrink-0, while the main content fills remaining space with flex-1 min-w-0.
<!-- Responsive app shell -->
<div class="flex flex-col lg:flex-row min-h-screen">
<!-- Sidebar: full-width on mobile, fixed on desktop -->
<aside class="w-full lg:w-64 shrink-0 bg-gray-900 text-white p-4 lg:p-6">
<div class="font-bold text-lg mb-4">MyApp</div>
<nav class="flex lg:flex-col gap-2">
<a href="#" class="px-3 py-2 rounded-lg bg-gray-800 text-sm">Dashboard</a>
<a href="#" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-sm transition-colors">Projects</a>
<a href="#" class="px-3 py-2 rounded-lg hover:bg-gray-800 text-sm transition-colors">Settings</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 min-w-0 p-6 bg-gray-50">
<h1 class="text-2xl font-bold">Dashboard</h1>
<p class="text-gray-600 mt-2">Welcome back!</p>
</main>
</div>Testing Responsive Layouts
Testing responsive layouts efficiently: use browser DevTools' responsive design mode to toggle between preset device sizes. Test at the exact breakpoint boundaries (e.g., 639px just below sm, 640px at sm) to catch edge cases. Also test at very small (320px) and very large (2560px) widths to ensure your layout does not break at extremes. Tailwind's JIT engine only generates classes you use, so there is no CSS bloat from unused breakpoint variants.
<!-- Debugging aid: borders at each breakpoint reveal layout structure -->
<div class="border border-red-500 sm:border-yellow-500 md:border-green-500 lg:border-blue-500 xl:border-purple-500 p-4">
<p class="text-sm text-gray-500">Border color changes at each breakpoint:
red=xs, yellow=sm, green=md, blue=lg, purple=xl</p>
<div class="flex flex-col md:flex-row gap-4 mt-3">
<div class="border border-dashed border-gray-400 flex-1 p-3 rounded">Column A</div>
<div class="border border-dashed border-gray-400 flex-1 p-3 rounded">Column B</div>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: flex-col to flex-row at a breakpoint is the core responsive layout toggle, grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 creates a classic responsive card grid, and order-* utilities allow DOM order to differ from visual order for SEO-friendly responsive layouts. Next up we explore responsive typography and spacing adjustments.
Frequently asked questions
Is the “Responsive Layouts With Flex and Grid” lesson free?
Yes — the full text of “Responsive Layouts With Flex and Grid” is free to read here on the web, and the Tailwind CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Tailwind CSS Academy course, upgrade to CoddyKit PRO.
What will I learn in “Responsive Layouts With Flex and Grid”?
Switch between column and row layouts at different breakpoints using responsive prefixes like md:flex-row and lg:grid-cols-3. You practise Tailwind CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Tailwind CSS Academy?
No prior experience is required. Tailwind CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Responsive Layouts With Flex and Grid” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Tailwind CSS Academy lesson?
Yes. Every Tailwind CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Tailwind's Breakpoint System
- Responsive Layouts With Flex and Grid
- Responsive Typography and Spacing
- Show and Hide Elements Responsively