*Nakshora from Zero (Nakshora 3.1) — chapter 3 of 6.* Make the box adapt across three screens.

What you will build#

Add screen prefixes and watch the layout respond.

Step by step#

example
html
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="p-4 bg-slate-100 rounded-lg">One</div>
  <div class="p-4 bg-slate-100 rounded-lg">Two</div>
  <div class="p-4 bg-slate-100 rounded-lg">Three</div>
</div>

Why it works#

Mobile-first prefixes ADD styles as the viewport grows — you never undo.

Try it yourself#

  • Resize the window slowly
  • Add a md: variant to one card
  • Break the grid at lg:

Series navigation#

tutorials/index|All tutorials · tutorials/from-zero/first-utilities|← Your first utilities · tutorials/from-zero/states|States and interactivity →