CSS Grid Mastery for Modern Layouts

Why CSS Grid?

CSS Grid is the most powerful layout system available in CSS. It lets you define two-dimensional layouts with ease — handling both rows and columns simultaneously.

Basic Grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

With Tailwind:

<div class="grid grid-cols-3 gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Responsive Grids

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
  <!-- auto-responsive columns -->
</div>

Spanning Columns and Rows

<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Wide item</div>
  <div>Normal</div>
  <div class="col-span-3">Full width</div>
</div>

Auto-fill vs Auto-fit

/* auto-fill: keeps empty columns */
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

/* auto-fit: collapses empty columns */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Named Grid Areas

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Conclusion

CSS Grid is indispensable for modern web layouts. Combined with Tailwind's responsive utilities, you can build complex, adaptive layouts with minimal code. Take the time to master it — it pays off on every project.