How can I create a grid layout using Tailwind CSS?

How can I create a grid layout using Tailwind CSS?

You can create a grid layout in Tailwind CSS by using the grid class along with grid-cols-{n} for columns and grid-rows-{n} for rows.

Can you show me an example of a 3-column grid?

Sure! Here's a simple example:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-500">Column 1</div>
  <div class="bg-green-500">Column 2</div>
  <div class="bg-red-500">Column 3</div>
</div>

What if I want to make it responsive?

You can use responsive classes like md:grid-cols-2 to change the number of columns at different breakpoints. For example:

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
  <div class="bg-blue-500">Column 1</div>
  <div class="bg-green-500">Column 2</div>
  <div class="bg-red-500">Column 3</div>
</div>