Campus Design System

Appearance

Place Content ​

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

Class NameCSS Equivalent
place-content-startplace-content: start;
place-content-centerplace-content: center;
place-content-endplace-content: end;
place-content-betweenplace-content: space-between;
place-content-aroundplace-content: space-around;
place-content-evenlyplace-content: space-evenly;
place-content-stretchplace-content: stretch;
place-content-baselineplace-content: baseline;

Place Content Start ​

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

html
<div class="grid place-content-start">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content Center ​

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

html
<div class="grid place-content-center">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content End ​

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

html
<div class="grid place-content-end">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content Space Between ​

The .place-content-between class sets the place-content property to space-between, distributing grid items evenly along the inline (row) axis.

html
<div class="grid place-content-between">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content Space Around ​

The .place-content-around class sets the place-content property to space-around, distributing grid items evenly with space around them along the inline (row) axis.

html
<div class="grid place-content-around">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content Evenly ​

The .place-content-evenly class sets the place-content property to space-evenly, distributing grid items evenly with space between and around them along the inline (row) axis.

html
<div class="grid place-content-evenly">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content Stretch ​

The .place-content-stretch class sets the place-content property to stretch, allowing grid items to stretch and fill the grid container along the inline (row) axis.

html
<div class="grid place-content-stretch">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
</div>
1
2
3
4

Place Content 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.