Layout with Grid

Tailwind provides utility classes to create grid-based layouts.

Enable Grid

<div className="grid">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

grid: enables grid layout.

Columns

<div className="grid grid-cols-2 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

• grid-cols-2: creates 2 columns;
• gap-4: adds space between items.

More Columns

<div className="grid grid-cols-3 gap-2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

grid-cols-3: creates 3 columns.

Span Columns

<div className="grid grid-cols-3 gap-4">
  <div className="col-span-2">Wide</div>
  <div>Small</div>
</div>

col-span-2: element takes 2 columns.

Use grid utilities to create structured layouts with rows, columns, and spacing.