Summary  
This chapter covers using utility classes to enable a grid container, define columns, add gaps, and span items across multiple columns to build structured layouts.  

General domain of usage  
Web interface layout design

Tailwind provides utility classes to create grid-based layouts.


### Enable Grid

```jsx
<div className="grid">
  <div>Item 1</div>
  <div>Item 2</div>
</div>
```
`grid`: enables grid layout.



### Columns

```jsx
<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

```jsx
<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

```jsx
<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.


Which Tailwind CSS utility class enables grid layout on a container?

Learn how to build and style modern interfaces with Tailwind CSS using utility classes and reusable UI patterns. Apply spacing, colors, layout, responsive rules, and interaction states to create clean React components and prepare for Next.js projects.

Layout with Grid

Enable Grid

Columns

More Columns

Span Columns