How do I make a responsive grid with Tailwind?
Asked on Oct 22, 2025
Answer
To create a responsive grid with Tailwind CSS, you can use the grid utilities along with responsive modifiers. Tailwind provides utilities for defining the number of columns and adjusting the layout at different breakpoints.
<!-- BEGIN COPY / PASTE -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
<div class="bg-blue-500 p-4">Item 1</div>
<div class="bg-blue-500 p-4">Item 2</div>
<div class="bg-blue-500 p-4">Item 3</div>
<div class="bg-blue-500 p-4">Item 4</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid" class initializes a grid layout.
- "grid-cols-1", "sm:grid-cols-2", etc., define the number of columns at various screen sizes.
- "gap-4" adds spacing between grid items.
- Responsive modifiers like "sm:", "md:", and "lg:" adjust the layout at different breakpoints.
Recommended Links: