Tailwind CSS vs. Raw CSS Grid

1. Defining the Container

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

<div class="grid grid-cols-4 gap-4">

Tailwind uses a 4-pixel scale for gaps. gap-4 is exactly 16px.

2. Spanning Columns and Rows

The core of the "Bento" look is the asymmetric spanning. Here is how the syntax differs:

.box-hero {
  grid-column: span 2;
  grid-row: span 2;
}

<div class="col-span-2 row-span-2">

3. Responsive Switching

The biggest advantage of Tailwind is the ability to change the grid structure instantly at different screen sizes without writing media queries.

<!-- 1 column on mobile, 2 on tablet, 4 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div class="col-span-1 lg:col-span-2">...</div>
</div>