How do I use Tailwind to create a responsive grid with gap between items?
Asked on Sep 29, 2025
Answer
Tailwind CSS provides utilities for creating responsive grids with gaps between items using its grid and gap classes. You can define the number of columns and the gap size, and adjust them for different screen sizes.
<!-- BEGIN COPY / PASTE -->
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="bg-blue-200 p-4">Item 1</div>
<div class="bg-blue-300 p-4">Item 2</div>
<div class="bg-blue-400 p-4">Item 3</div>
<div class="bg-blue-500 p-4">Item 4</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid" class sets the element to display as a grid container.
- "grid-cols-1" defines a single column layout by default.
- "gap-4" adds a uniform gap between grid items.
- Responsive classes like "md:grid-cols-2" and "lg:grid-cols-3" adjust the number of columns at different breakpoints.
Recommended Links: