Rentang Kolom dan Baris
Buat item membentang di beberapa kolom atau baris menggunakan utilitas col-span-* dan row-span-* untuk susunan grid yang kompleks.
Rentang Kolom dan Baris adalah pelajaran Tailwind CSS Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Tailwind CSS Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
What Is Spanning in Grid?
By default, each child of a CSS Grid container occupies exactly one column and one row. Spanning lets a single grid item stretch across multiple columns or rows to create asymmetric, magazine-style layouts. Tailwind provides col-span-* and row-span-* utilities that translate directly to grid-column: span N and grid-row: span N in CSS.
<!-- Item spans 2 columns out of a 4-column grid -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2 bg-blue-200 p-4">Wide item</div>
<div class="bg-blue-100 p-4">Normal</div>
<div class="bg-blue-100 p-4">Normal</div>
</div>col-span-* Utilities
Tailwind ships with col-span-1 through col-span-12 as well as col-span-full, which spans all available columns. Apply these utilities to a grid child, not the container. For example, in a 12-column grid, col-span-8 gives you a main content area and the remaining 4 columns can hold a sidebar — a common two-pane layout pattern.
<!-- Classic 8 + 4 main/sidebar layout -->
<div class="grid grid-cols-12 gap-6">
<main class="col-span-8 bg-white p-6 rounded shadow">
Main Content
</main>
<aside class="col-span-4 bg-gray-100 p-6 rounded">
Sidebar
</aside>
</div>col-span-full for Full-Width Items
The col-span-full class makes an element stretch across every column in its grid, equivalent to grid-column: 1 / -1. This is perfect for full-width banners, section titles, or dividers that need to break out of a card grid without changing the grid definition. It always spans whatever the current number of columns is, even if you change the column count responsively.
<!-- Full-width banner inside a 3-column card grid -->
<div class="grid grid-cols-3 gap-4">
<div class="col-span-full bg-indigo-500 text-white p-4 text-center rounded">
Featured Announcement
</div>
<div class="bg-gray-100 p-4">Card A</div>
<div class="bg-gray-100 p-4">Card B</div>
<div class="bg-gray-100 p-4">Card C</div>
</div>row-span-* Utilities
row-span-* works just like column spanning but on the vertical axis. A row-span-2 element occupies two row tracks, making it taller than its neighbors. This is ideal for feature images or hero cards in a bento-style grid, where one prominent item sits next to multiple smaller ones.
<!-- Bento grid: one tall card beside two shorter ones -->
<div class="grid grid-cols-2 grid-rows-2 gap-4 h-64">
<div class="row-span-2 bg-purple-300 p-4 rounded">Tall card</div>
<div class="bg-purple-100 p-4 rounded">Short A</div>
<div class="bg-purple-100 p-4 rounded">Short B</div>
</div>Combining col-span and row-span
You can combine col-span-* and row-span-* on the same element to create a large feature cell. This is the foundation of bento-box and mosaic layouts. For example, a hero image cell that spans col-span-2 row-span-2 fills a 2×2 area while surrounding cells fill in around it automatically.
<!-- 3x3 bento grid with a featured 2x2 cell -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-72">
<div class="col-span-2 row-span-2 bg-sky-400 text-white p-4 rounded">
Featured
</div>
<div class="bg-sky-100 p-3 rounded">A</div>
<div class="bg-sky-100 p-3 rounded">B</div>
<div class="bg-sky-100 p-3 rounded">C</div>
<div class="col-span-2 bg-sky-200 p-3 rounded">Wide bottom</div>
</div>Explicit Column Placement
Beyond spanning, you can precisely control where an item starts using col-start-* and col-end-* utilities. col-start-2 places the item's left edge on the second grid line, and col-end-5 ends it on the fifth. This fine-grained control lets you skip columns intentionally to create whitespace in your layout.
<!-- Item starts at column 2, ends at column 5 (spans 3) -->
<div class="grid grid-cols-6 gap-4">
<div class="col-start-2 col-end-5 bg-rose-200 p-4 rounded">
Starts at line 2, ends at line 5
</div>
<div class="bg-rose-100 p-4 rounded">Normal</div>
</div>row-start-* and row-end-* Placement
Similarly, row-start-* and row-end-* control vertical placement explicitly. These are most useful when you need to override auto-placement to position specific items in exact grid areas. When combined with col-start and col-end, you effectively pin elements to a specific grid region.
<!-- Item pinned to row 2, columns 2-3 -->
<div class="grid grid-cols-3 grid-rows-3 gap-3 h-48">
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="bg-gray-200 p-3 rounded">Auto-placed</div>
<div class="col-start-2 col-span-2 row-start-2 bg-emerald-300 p-3 rounded">
Explicit position
</div>
</div>Responsive Spanning
Combine responsive prefixes with span utilities to create layouts that change dramatically between breakpoints. An item might span all columns on mobile to stay readable, then shift to a narrow sidebar span on desktop. The pattern col-span-full md:col-span-4 lg:col-span-3 achieves exactly this: full width on mobile, narrower on larger screens.
<!-- Card spans full on mobile, one-third on large screens -->
<div class="grid grid-cols-12 gap-4">
<div class="col-span-12 lg:col-span-4 bg-amber-100 p-4 rounded">
Sidebar/card
</div>
<div class="col-span-12 lg:col-span-8 bg-amber-50 p-4 rounded">
Main content
</div>
</div>Avoiding Overflow With Auto
If a child has both col-start-* and col-span-* that conflict with the grid bounds, the browser wraps it to the next row. Use col-auto to explicitly let the browser choose the start position — this resets any inherited explicit placement back to automatic and is useful when you only want to control the span, not the start.
<!-- col-auto resets to automatic placement -->
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 bg-violet-200 p-3">Spans 2</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-auto bg-violet-100 p-3">Auto-placed</div>
<div class="col-span-3 bg-violet-300 p-3">Spans 3</div>
</div>Real-World Blog Layout
A classic blog layout features a wide main post area and a narrow sidebar. Using a 12-column base grid with col-span-8 for the article and col-span-4 for the sidebar, you get a 2:1 ratio. Adding col-span-12 for a full-width footer row completes the structure — all with no custom CSS.
<div class="grid grid-cols-12 gap-6 p-6">
<header class="col-span-12 bg-slate-800 text-white p-4 rounded">
Blog Header
</header>
<article class="col-span-12 md:col-span-8 bg-white p-6 rounded shadow">
Article content here...
</article>
<aside class="col-span-12 md:col-span-4 bg-gray-50 p-4 rounded">
Widgets
</aside>
<footer class="col-span-12 bg-slate-700 text-white p-4 rounded text-center">
Footer
</footer>
</div>Combining Spanning Utilities
Here is a magazine-style card grid that combines column and row spanning. A large feature card occupies col-span-2 row-span-2, two tall side cards each use row-span-1, and a full-width banner uses col-span-full. Composing these utilities together gives you editorial layouts that used to require complex CSS with named grid areas.
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 row-span-2 bg-blue-500 text-white p-6 rounded">
Feature Story
</div>
<div class="bg-blue-200 p-4 rounded">Short A</div>
<div class="bg-blue-200 p-4 rounded">Short B</div>
<div class="col-span-full bg-blue-100 p-4 rounded text-center">
Full-Width Banner
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: col-span-* and row-span-* stretch grid items across multiple tracks, col-start-* and col-end-* enable precise explicit placement, and col-span-full always spans every column regardless of count. Next up we explore how to define explicit grid rows and control auto-placement behavior.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Rentang Kolom dan Baris” gratis?
Ya — teks lengkap “Rentang Kolom dan Baris” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Tailwind CSS Academy, upgrade ke CoddyKit PRO. Kursus Tailwind CSS Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Rentang Kolom dan Baris”?
Buat item membentang di beberapa kolom atau baris menggunakan utilitas col-span-* dan row-span-* untuk susunan grid yang kompleks. Kamu berlatih Tailwind CSS Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Tailwind CSS Academy?
Tidak diperlukan pengalaman sebelumnya. Tailwind CSS Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “Rentang Kolom dan Baris” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Tailwind CSS Academy ini?
Ya. Setiap pelajaran Tailwind CSS Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Menentukan Kolom Grid
- Rentang Kolom dan Baris
- Baris Grid dan Penempatan Otomatis
- Jarak, Justifikasi, dan Perataan dalam Grid