Tailwind CSS Academy · Lesson

Gap, Justify, and Align in Grid

Add spacing between grid cells with gap-x-* and gap-y-*, and align items within grid areas using justify-items-* and place-items-*.

Spacing Between Grid Cells

Once your grid columns and rows are defined, the next step is controlling the space between cells. Tailwind's gap-* utilities map directly to the CSS gap shorthand, which sets both row and column gutters simultaneously. A single gap-4 (16px) class gives consistent spacing in all directions, keeping your layout balanced without any custom CSS.

<!-- Uniform gap in all directions -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4 rounded">A</div>
  <div class="bg-blue-100 p-4 rounded">B</div>
  <div class="bg-blue-100 p-4 rounded">C</div>
  <div class="bg-blue-100 p-4 rounded">D</div>
  <div class="bg-blue-100 p-4 rounded">E</div>
  <div class="bg-blue-100 p-4 rounded">F</div>
</div>

gap-x-* and gap-y-* Utilities

When you need different spacing between columns versus between rows, use gap-x-* for horizontal gutters and gap-y-* for vertical gutters. For example, gap-x-8 gap-y-4 gives wide horizontal space between columns and tighter vertical space between rows. This lets you fine-tune the visual rhythm of your grid independently in each direction.

<!-- Wide horizontal gap, tight vertical gap -->
<div class="grid grid-cols-3 gap-x-10 gap-y-2">
  <div class="bg-green-100 p-3 rounded">A</div>
  <div class="bg-green-100 p-3 rounded">B</div>
  <div class="bg-green-100 p-3 rounded">C</div>
  <div class="bg-green-100 p-3 rounded">D</div>
  <div class="bg-green-100 p-3 rounded">E</div>
  <div class="bg-green-100 p-3 rounded">F</div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy