Campus Design System

Appearance

Place Self ​

Utilities for controlling the placement of individual grid items within the grid container.

Class NameCSS Equivalent
place-self-autoplace-self: auto;
place-self-startplace-self: start;
place-self-centerplace-self: center;
place-self-endplace-self: end;
place-self-stretchplace-self: stretch;

Place Self Auto ​

The .place-self-auto class sets the place-self property to auto, allowing the grid item to be placed according to its normal position.

html
<div class="grid grid-cols-3 place-items-stretch">
  <div class="[...]">1</div>
  <div class="[...] place-self-auto">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>
1
2
3
4
5
6

Place Self Start ​

The .place-self-start class sets the place-self property to start, aligning the grid item at the start of the grid container.

html
<div class="grid grid-cols-3 place-items-stretch">
  <div class="[...]">1</div>
  <div class="[...] place-self-start">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>
1
2
3
4
5
6

Place Self Center ​

The .place-self-center class sets the place-self property to center, aligning the grid item at the center of the grid container.

html
<div class="grid grid-cols-3 place-items-stretch">
  <div class="[...]">1</div>
  <div class="[...] place-self-center">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>
1
2
3
4
5
6

Place Self End ​

The .place-self-end class sets the place-self property to end, aligning the grid item at the end of the grid container.

html
<div class="grid grid-cols-3 place-items-stretch">
  <div class="[...]">1</div>
  <div class="[...] place-self-end">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>
1
2
3
4
5
6

Place Self Stretch ​

The .place-self-stretch class sets the place-self property to stretch, allowing the grid item to stretch and fill the grid container.

html
<div class="grid grid-cols-3 place-items-center">
  <div class="[...]">1</div>
  <div class="[...] place-self-stretch">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
  <div class="[...]">6</div>
</div>
1
2
3
4
5
6