MapCSS

Flexbox & Grid

Align Content

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

Basic usage

Start

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

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-start** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Center

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

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-center** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

End

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

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-end** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space between

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

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-between** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>

Space around

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

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-around** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</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:

01
02
03
04
05
<div className="h-56 grid grid-cols-3 gap-4 **content-evenly** ...">
  <div>01</div>
  <div>02</div>
  <div>03</div>
  <div>04</div>
  <div>05</div>
</div>