CSS Grid System: Template Columns, Rows, Col-Span & Gap0%
CSS Grid System: Template Columns, Rows, Col-Span & Gap
Beginner12 min read•Updated: Jul 11, 2026
CSS Grid System: Template Columns, Rows, Col-Span & Gap
While Flexbox is ideal for one-dimensional layouts (a row OR a column), CSS Grid is the gold standard for two-dimensional layouts (rows AND columns simultaneously). Tailwind CSS makes CSS Grid effortless with grid-cols-{n}, col-span-{n}, and gap utilities.
1. Creating a Standard Responsive Grid
HTML
<!-- 1 column on mobile, 2 on tablet (md), 4 on desktop (lg) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="p-6 bg-white rounded-xl shadow">Course 1</div>
<div class="p-6 bg-white rounded-xl shadow">Course 2</div>
<div class="p-6 bg-white rounded-xl shadow">Course 3</div>
<div class="p-6 bg-white rounded-xl shadow">Course 4</div>
</div>
2. Spanning Columns and Rows (col-span & row-span)
Tailwind supports fractional spanning across a 12-column grid:
HTML
<!-- Modern 12-Column Dashboard Layout -->
<div class="grid grid-cols-12 gap-4">
<!-- Sidebar spans 3 columns -->
<aside class="col-span-12 lg:col-span-3 bg-slate-900 text-white p-4 rounded-xl">
Sidebar Menu
</aside>
<!-- Main Content spans 9 columns -->
<main class="col-span-12 lg:col-span-9 bg-white p-6 rounded-xl border">
Dashboard Analytics
</main>
</div>
3. Asymmetrical Bento Grid Layout
Bento grids combine col-span and row-span for visual visual storytelling:
HTML
<div class="grid grid-cols-1 md:grid-cols-3 grid-rows-2 gap-4 h-96">
<!-- Large Feature Card (spans 2 cols, 2 rows) -->
<div class="md:col-span-2 md:row-span-2 bg-gradient-to-br from-blue-600 to-indigo-700 text-white p-8 rounded-2xl">
<h3 class="text-2xl font-bold">Featured Full-Stack Program</h3>
</div>
<!-- Top Right Card -->
<div class="bg-slate-100 p-6 rounded-2xl">
<h4>Online Certification</h4>
</div>
<!-- Bottom Right Card -->
<div class="bg-amber-50 p-6 rounded-2xl">
<h4>Live Lab Sessions</h4>
</div>
</div>
4. Grid Auto-Fit vs Auto-Fill with Arbitrary Values
When you want an automated responsive grid where cards wrap without media queries:
HTML
<!-- Auto-filling cards with minimum 250px width each -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-6">
<div class="bg-white p-4 shadow rounded-lg">Card A</div>
<div class="bg-white p-4 shadow rounded-lg">Card B</div>
<div class="bg-white p-4 shadow rounded-lg">Card C</div>
</div>
Interactive Quiz
Multiple Choice Questions
Question 1
Which class establishes a 3-column equal-width grid container in Tailwind CSS?
Question 2
How do you make an element take up 4 columns inside a 12-column grid in Tailwind?
Question 3
What is the purpose of
row-span-2 in a CSS grid?Question 4
Which class specifies an independent 24px vertical row gap and 16px horizontal column gap?
Question 5
What happens if a developer uses
col-span-2 inside a container that only has grid-cols-1?Next Lesson
Mobile-First Responsive Design with Breakpoint Prefixes (sm, md, lg, xl)
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
Related Lessons
Practice Quiz
Test your understanding of this lesson with 5 questions. Each question has one correct answer.