Campus Design System

Appearance

Place Items ​

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

Class NameCSS Equivalent
place-items-startplace-items: start;
place-items-centerplace-items: center;
place-items-endplace-items: end;
place-items-stretchplace-items: stretch;
place-items-baselineplace-items: baseline;

Place Items Start ​

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

html
<div class="grid grid-cols-3 place-items-start">
  <div class="[...]">1</div>
  <div class="[...]">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 Items Center ​

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

html
<div class="grid grid-cols-3 place-items-center">
  <div class="[...]">1</div>
  <div class="[...]">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 Items End ​

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

html
<div class="grid grid-cols-3 place-items-end">
  <div class="[...]">1</div>
  <div class="[...]">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 Items Stretch ​

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

html
<div class="grid grid-cols-3 place-items-stretch">
  <div class="[...]">1</div>
  <div class="[...]">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 Items Baseline ​

Participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.