Arrange

Utilities for arranging flex and grid items.

Justify Content

Using j-content-[*], you can control how flex and grid items are positioned along the main axis of a container.

j-content-
1
2
3

Justify Items

Using j-items-[*], you can control how grid items are aligned along their inline axis.

j-items-
1
2
3

Justify Self

Using j-self-[*], you can control how an individual grid item is aligned along its inline axis.

j-self-
1
2
3

Align Content

Using j-content-[*], you can control how rows are positioned in flex and grid containers.

a-content-
1
2
3
4
5
6

Align Items

Using a-items-[*], you can control how grid or flex items are aligned along their cross axis.

a-items-
1
2
3

Align Self

Using a-self-[*], you can control how an individual grid or flex item is aligned along its cross axis.

a-self-
1
2
3

Place Content

Using p-content-[*], you can control how content are justified and aligned.

p-content-
1
2
3
4
5
6
7
8
9

Place Items

Using p-items-[*], you can control how items are justified and aligned.

p-items-
1
2
3

Place Self

Using p-self-[*], you can control how an individual item is justified and aligned.

p-self-
1
2
3

Order

Using order-[*], you can control the order of grid and flex items.

order-
item 1
item 2
item 3
item 4
item 5
item
You can also use numerical values like "order-3".