Lesson 22 of 3073%

(Progress persistence is disabled until Phase 9)

Tailwind CSS
Beginner

Grid Layout

Introduction to CSS Grid in Tailwind.

Apply the grid class to turn an element into a grid container.

Use the gap-{size} utility to easily add space between grid rows and columns!

<div class="grid gap-4 bg-gray-100 p-4">
  <div class="bg-white p-4">Item 1</div>
  <div class="bg-white p-4">Item 2</div>
</div>
Try It Yourself

Lesson Progress

Ready to practise?

Apply what you learned with a hands-on challenge.

Practise This Topic