Justify Items

Utilities for controlling the alignment of grid items along the inline (row) axis.

Class Name	CSS Equivalent
justify-items-stretch	justify-items: stretch;
justify-items-start	justify-items: start;
justify-items-center	justify-items: center;
justify-items-end	justify-items: end;

Justify Items Stretch

The .justify-items-stretch class sets the justify-items property to stretch, allowing grid items to stretch along the inline (row) axis.

<div class="grid gap-s grid-cols-3 justify-items-stretch">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

4

5

6

Justify Items Start

The .justify-items-start class sets the justify-items property to start, aligning grid items along the inline (row) axis at the start.

<div class="grid gap-s grid-cols-3 justify-items-start">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

4

5

6

Justify Items Center

The .justify-items-center class sets the justify-items property to center, aligning grid items along the inline (row) axis at the center.

<div class="grid gap-s grid-cols-3 justify-items-center">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

4

5

6

Justify Items End

The .justify-items-end class sets the justify-items property to end, aligning grid items along the inline (row) axis at the end.

<div class="grid gap-s grid-cols-3 justify-items-end">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>

1

2

3

4

5

6