How can I make a two-column layout that stacks on small screens in Tailwind CSS?
Asked on Sep 21, 2025
Answer
To create a two-column layout that stacks on small screens using Tailwind CSS, you can utilize the responsive grid classes. Tailwind's grid utilities allow you to define column layouts that adjust based on screen size.
<!-- BEGIN COPY / PASTE -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-blue-500 p-4">Column 1</div>
<div class="bg-green-500 p-4">Column 2</div>
</div>
<!-- END COPY / PASTE -->Additional Comment:
- The "grid" class creates a grid container.
- "grid-cols-1" sets a single column layout by default.
- "sm:grid-cols-2" changes the layout to two columns on small screens and above.
- "gap-4" adds spacing between the columns.
Recommended Links: