Grid 행과 자동 배치
grid-rows-*로 명시적 행을 정의하고, grid-flow-*로 자동 배치를 조절하며, 브라우저가 항목을 지능적으로 배치하도록 합니다.
Grid 행과 자동 배치은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.
Explicit vs Implicit Grid Rows
When you place items in a grid, CSS Grid creates rows in two ways: explicitly (you define them with grid-rows-*) or implicitly (the browser generates them automatically when items overflow). Understanding this distinction helps you control heights precisely when you need it, or let the browser handle it when you have variable content.
<!-- Explicit 3-row grid -->
<div class="grid grid-rows-3 grid-cols-2 gap-4 h-48">
<div class="bg-blue-100 p-3">Row 1, Col 1</div>
<div class="bg-blue-100 p-3">Row 1, Col 2</div>
<div class="bg-blue-200 p-3">Row 2, Col 1</div>
<div class="bg-blue-200 p-3">Row 2, Col 2</div>
<div class="bg-blue-300 p-3">Row 3, Col 1</div>
<div class="bg-blue-300 p-3">Row 3, Col 2</div>
</div>The grid-rows-N Utilities
Tailwind provides grid-rows-1 through grid-rows-6 to define explicit row tracks. Under the hood, grid-rows-3 compiles to grid-template-rows: repeat(3, minmax(0, 1fr)). These rows share the available height of the container equally. This is most useful when the container has a fixed or percentage-based height.
<!-- 4 equal rows in a fixed-height dashboard -->
<div class="grid grid-rows-4 gap-2 h-64">
<div class="bg-emerald-100 p-2 rounded">Section 1</div>
<div class="bg-emerald-200 p-2 rounded">Section 2</div>
<div class="bg-emerald-300 p-2 rounded">Section 3</div>
<div class="bg-emerald-400 p-2 rounded">Section 4</div>
</div>Implicit Rows and grid-auto-rows
When more items exist than your explicit rows can hold, the browser creates implicit rows. By default these implicit rows are sized to fit their content. You can control their height using custom CSS or Tailwind's arbitrary value syntax: for example, setting the row height via inline style or using the auto-rows-* utilities available in newer Tailwind versions.
<!-- Implicit rows kick in for items beyond grid-rows-2 -->
<div class="grid grid-cols-2 grid-rows-2 gap-3" style="grid-auto-rows: 80px">
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-100 p-3">Explicit row 1</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<div class="bg-purple-200 p-3">Explicit row 2</div>
<!-- These create implicit rows at 80px height -->
<div class="bg-purple-300 p-3">Implicit row</div>
<div class="bg-purple-300 p-3">Implicit row</div>
</div>Understanding grid-flow
The grid-flow property controls the auto-placement algorithm — the order in which items fill available grid cells. Tailwind's grid-flow-row (default) fills left-to-right across each row before moving down. grid-flow-col fills top-to-bottom down each column before moving right. This is like the difference between reading a book left-to-right versus reading a newspaper column by column.
<!-- Row flow (default): items fill horizontally -->
<div class="grid grid-cols-3 grid-flow-row gap-3">
<div class="bg-sky-100 p-3">1</div>
<div class="bg-sky-100 p-3">2</div>
<div class="bg-sky-100 p-3">3</div>
<div class="bg-sky-100 p-3">4</div>
</div>grid-flow-col for Column-First Layout
Applying grid-flow-col changes the auto-placement algorithm to fill columns first. Combined with grid-rows-* to limit how tall each column can grow, this creates a newspaper or Pinterest-style vertical card flow. Items fill downward in the first column, then overflow into the next column automatically.
<!-- Column-first flow: items fill downward in each column -->
<div class="grid grid-rows-3 grid-flow-col gap-3">
<div class="bg-rose-100 p-3">Col 1, Row 1</div>
<div class="bg-rose-100 p-3">Col 1, Row 2</div>
<div class="bg-rose-100 p-3">Col 1, Row 3</div>
<div class="bg-rose-200 p-3">Col 2, Row 1</div>
<div class="bg-rose-200 p-3">Col 2, Row 2</div>
<div class="bg-rose-200 p-3">Col 2, Row 3</div>
</div>Dense Auto Placement
grid-flow-dense activates the dense packing algorithm, which allows the browser to fill in holes left by large spanning items. Without dense packing, a grid with spanning items leaves gaps because placement is strictly ordered. Dense packing is ideal for image galleries where you want a tight mosaic with no wasted space.
<!-- Dense packing fills holes left by spanning items -->
<div class="grid grid-cols-3 grid-flow-dense gap-3">
<div class="col-span-2 bg-amber-200 p-3">Wide (spans 2)</div>
<div class="bg-amber-100 p-3">B</div>
<div class="bg-amber-100 p-3">C</div>
<!-- D would normally go after C, but dense fills the hole before B -->
<div class="bg-amber-100 p-3">D</div>
</div>Row and Column Flow Dense Together
You can combine flow direction and density with grid-flow-row-dense or grid-flow-col-dense. The row-dense variant fills rows first but backfills any holes, while col-dense fills columns first and backfills. These are the go-to utilities for gallery-style layouts with mixed card sizes where aesthetics matter more than strict ordering.
<!-- Row-dense: fills rows first, packs holes -->
<div class="grid grid-cols-4 grid-flow-row-dense gap-3">
<div class="col-span-3 bg-teal-300 p-3">Spans 3</div>
<div class="bg-teal-100 p-3">A</div>
<div class="bg-teal-100 p-3">B</div>
<div class="col-span-2 bg-teal-200 p-3">Spans 2</div>
<div class="bg-teal-100 p-3">C</div>
</div>Combining Grid Rows With Columns
Defining both grid-rows-* and grid-cols-* together gives you a fully specified grid template, similar to a spreadsheet. Each cell in this template has a predictable position. This approach works great for dashboard layouts where you know exactly how many sections you need and want precise control over their heights and widths.
<!-- 3-col x 2-row dashboard shell -->
<div class="grid grid-cols-3 grid-rows-2 gap-4 h-64">
<div class="col-span-3 bg-slate-700 text-white p-3 rounded">Header</div>
<div class="bg-slate-100 p-3 rounded">Widget 1</div>
<div class="bg-slate-100 p-3 rounded">Widget 2</div>
<div class="bg-slate-100 p-3 rounded">Widget 3</div>
</div>Custom Row Heights With Arbitrary Values
Tailwind's arbitrary value syntax lets you write any CSS value inside brackets. For grid rows, you can use grid-rows-[100px_1fr_auto] to define a 100px fixed header, a flexible content area, and an auto-sized footer. This is more concise than writing inline styles and benefits from JIT compilation into your production CSS.
<!-- Custom row heights: 60px header, flexible main, auto footer -->
<div class="grid h-screen" style="grid-template-rows: 60px 1fr auto">
<header class="bg-gray-900 text-white flex items-center px-6">
App Header
</header>
<main class="bg-gray-50 p-6 overflow-y-auto">
Main scrollable content
</main>
<footer class="bg-gray-800 text-white p-4 text-center">
Footer
</footer>
</div>Auto Rows in Practice
When building card grids with dynamic content, you often want uniform minimum row heights so short cards do not look dwarfed. Using grid-auto-rows via inline style or Tailwind's JIT arbitrary variant [grid-auto-rows:200px], you can ensure every row is at least as tall as needed. This prevents jarring height inconsistencies in data-driven lists.
<!-- Cards with minimum row height for visual consistency -->
<div class="grid grid-cols-3 gap-4" style="grid-auto-rows: minmax(120px, auto)">
<div class="bg-indigo-100 p-4 rounded">Short card</div>
<div class="bg-indigo-100 p-4 rounded">
<p>Longer card with</p>
<p>more content</p>
<p>filling it out</p>
</div>
<div class="bg-indigo-100 p-4 rounded">Short</div>
</div>Practical App Shell With Grid
Putting it all together, here is a full application shell using CSS Grid for the outer layout. The grid-rows define header, content, and footer heights. Inside the content row, a nested grid-cols-[sidebar_main] pattern divides the screen. This approach is clean, predictable, and requires no absolute positioning or flexbox hacks for the top-level structure.
<div class="grid h-screen" style="grid-template-rows: 56px 1fr 40px">
<header class="bg-indigo-700 text-white px-6 flex items-center">
My App
</header>
<div class="grid overflow-hidden" style="grid-template-columns: 240px 1fr">
<nav class="bg-indigo-50 p-4 overflow-y-auto border-r">
Sidebar nav
</nav>
<main class="p-6 overflow-y-auto">
Page content
</main>
</div>
<footer class="bg-gray-200 text-center text-sm flex items-center justify-center">
Copyright 2024
</footer>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: grid-rows-* defines explicit row tracks with equal heights, grid-flow-row and grid-flow-col control placement direction, and grid-flow-dense backfills holes left by spanning items. Next up we explore gap utilities and alignment controls inside grid containers.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“Grid 행과 자동 배치” 강의는 무료인가요?
네 — “Grid 행과 자동 배치” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Grid 행과 자동 배치”에서 뭘 배우나요?
grid-rows-*로 명시적 행을 정의하고, grid-flow-*로 자동 배치를 조절하며, 브라우저가 항목을 지능적으로 배치하도록 합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.
“Grid 행과 자동 배치” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- Grid 열 정의
- 열과 행 걸치기
- Grid 행과 자동 배치
- Grid의 간격, 배치 및 정렬