Tailwind CSS Academy · 강의

Flex와 Grid를 사용한 반응형 레이아웃

md:flex-row, lg:grid-cols-3과 같은 반응형 접두사를 사용해 서로 다른 중단점에서 열 레이아웃과 행 레이아웃 사이를 전환합니다.

레슨 2/413개 단계

Flex와 Grid를 사용한 반응형 레이아웃은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

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.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 30
레슨: 120

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“Flex와 Grid를 사용한 반응형 레이아웃” 강의는 무료인가요?

네 — “Flex와 Grid를 사용한 반응형 레이아웃” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“Flex와 Grid를 사용한 반응형 레이아웃”에서 뭘 배우나요?

md:flex-row, lg:grid-cols-3과 같은 반응형 접두사를 사용해 서로 다른 중단점에서 열 레이아웃과 행 레이아웃 사이를 전환합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“Flex와 Grid를 사용한 반응형 레이아웃” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Tailwind CSS Academy(으)로 돌아가기