Part 21: CSS Grid Foundations: Grid Columns & Grid Rows

While Flexbox is 1-dimensional (row OR column), CSS Grid is 2-dimensional (rows AND columns simultaneously). Tailwind makes grid layouts intuitive with grid-cols-*.

1. Initializing CSS Grid

• grid: Defines a grid container.
• grid-cols-1 to grid-cols-12: Sets number of equal-width columns.

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-100 rounded">Col 1</div>
  <div class="p-4 bg-blue-100 rounded">Col 2</div>
  <div class="p-4 bg-blue-100 rounded">Col 3</div>
</div>

2. Responsive Grid Breakpoints

A standard responsive pattern: 1 column on mobile, 2 on tablet, and 4 on desktop:

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <div class="p-6 bg-white rounded-xl shadow border">Card 1</div>
  <div class="p-6 bg-white rounded-xl shadow border">Card 2</div>
  <div class="p-6 bg-white rounded-xl shadow border">Card 3</div>
  <div class="p-6 bg-white rounded-xl shadow border">Card 4</div>
</div>

Key Takeaways

• Use grid paired with grid-cols-* for 2D layouts.
• Change column counts responsively with breakpoint prefixes (grid-cols-1 md:grid-cols-3).

In Part 22, we will cover Col-Span and Row-Span for Complex Layouts!