grid grid-cols-3: three equal columns.gap-4: space between cells.col-span-2: an item spanning two columns.grid-rows-2,place-items-center
Tailwind Grid
Grid layouts with utility classes.
✍️ 3 exercises + code challenge in this lessonKey Takeaways: Tailwind Grid
Mastering Tailwind Grid helps you write clean and reliable Tailwind CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
Tailwind Grid Code Example
Tailwind CSS<script src="https://cdn.tailwindcss.com"></script>
<div class="grid grid-cols-3 gap-4 p-6">
<div class="col-span-2 p-4 bg-cyan-500 text-white rounded">col-span-2</div>
<div class="p-4 bg-cyan-300 rounded">1</div>
<div class="p-4 bg-cyan-300 rounded">2</div>
<div class="p-4 bg-cyan-300 rounded">3</div>
<div class="p-4 bg-cyan-300 rounded">4</div>
</div>
Free sign-in required · Google login available
Tailwind Grid Practice Exercises
Check what you learned in “Tailwind Grid”.
/ 3 solved
Fill in the blank
Create a grid with two columns.
<div class="grid ">...</div>
✓ Correct!
Not quite. Try again.
Multiple choice
How do you make an item span 2 columns?
✓ Correct!
Not quite. Try again.
Code challenge
Make the container a grid with grid-cols-3 and gap-4.
Write the code in the live editor. Your answer is checked automatically.
✓ Solved
Free sign-in required · Google login available
to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services