---
url: /docs/foundations/css-classes/align-content.md
---
> Flexbox & Grid

# Align Content

Utilities for controlling how rows are positioned in multi-row flex and grid containers.

## Quick reference

| Class | Description |
|-------|-------------|
| `content-start` | `align-content: flex-start` |
| `content-center` | `align-content: center` |
| `content-end` | `align-content: flex-end` |
| `content-between` | `align-content: space-between` |
| `content-around` | `align-content: space-around` |
| `content-evenly` | `align-content: space-evenly` |

## Basic usage

### Start

Use `content-start` to pack rows in a container against the start of the cross axis.

```html{1}
<div class="grid grid-cols-3 gap-24 content-start ...">
  <!-- ... -->
</div>
```

### Center

Use `content-center` to pack rows in a container in the center of the cross axis.

```html{1}
<div class="grid grid-cols-3 gap-24 content-center ...">
  <!-- ... -->
</div>
```

### End

Use `content-end` to pack rows in a container against the end of the cross axis.

```html{1}
<div class="grid grid-cols-3 gap-16 content-end ...">
  <!-- ... -->
</div>
```

### Space between

Use `content-between` to distribute rows in a container such that there is an equal amount of space between each line:

```html{1}
<div class="grid grid-cols-3 gap-24 content-between ...">
  <!-- ... -->
</div>
```

### Space around

Use `content-around` to distribute rows in a container such that there is an equal amount of space around each line:

```html{1}
<div class="grid grid-cols-3 gap-x-16 content-around ...">
  <!-- ... -->
</div>
```

### Space evenly

Use `content-evenly` to distribute rows in a container such that there is an equal amount of space around each item, but also accounting for the doubling of space you would normally see between each item when using `content-around`.

```html{1}
<div class="grid grid-cols-3 gap-x-16 content-evenly ...">
  <!-- ... -->
</div>
```

## Applying conditionally

### Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more.
For example, use `md:content-around` to apply the `content-around` utility at only medium screen sizes and above.

```html
<div class="grid content-start md:content-around">
  <!-- ... -->
</div>
```