Lesson 30 of 30100%
(Progress persistence is disabled until Phase 9)
Tailwind CSS
Beginner
Responsive Layouts
Building layouts that adapt to the screen size.
A very common pattern is converting a single column mobile layout into a multi-column desktop layout.
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
<div class="bg-white p-4 shadow rounded">Item 1</div>
<div class="bg-white p-4 shadow rounded">Item 2</div>
<div class="bg-white p-4 shadow rounded">Item 3</div>
</div>On a phone, these items will stack vertically. On a tablet, they form 2 columns. On a laptop, 3 columns!
Try It Yourself