Lesson list · Lesson 2 of 3
Foundations · Lesson 2 of 3
Responsive Design
One column on phones, four on desktops, using breakpoint prefixes.
1 min 0 comments
Write the mobile layout first, then add prefixes such as md: and lg: for larger screens.
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">...</div>Think mobile first
A class without a prefix applies to every screen size. A prefixed class takes over from that width upward.
Discussion
Log in to join the conversation. Log in
No discussion here yet. Be the first to ask.