Campus Design System

Appearance

Align Content ​

Utilities for controlling the alignment of grid items within the grid container along the block (column) axis.

Class NameCSS Equivalent
content-startalign-content: start;
content-centeralign-content: center;
content-endalign-content: end;
content-normalalign-content: normal;
content-stretchalign-content: stretch;
content-betweenalign-content: space-between;
content-aroundalign-content: space-around;
content-evenlyalign-content: space-evenly;
content-baselinealign-content: baseline;

Align Content Start ​

The .content-start class sets the align-content property to start, aligning grid items along the block (column) axis at the start.

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

Align Content Center ​

The .content-center class sets the align-content property to center, aligning grid items along the block (column) axis at the center.

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

Align Content End ​

The .content-end class sets the align-content property to end, aligning grid items along the block (column) axis at the end.

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

Align Content Normal ​

The .content-normal class sets the align-content property to normal, allowing the browser to determine the alignment of grid items.

html
<div class="grid grid-cols-3 content-normal">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
  <div class="[...]">4</div>
  <div class="[...]">5</div>
</div>
1
2
3
4
5

Align Content Stretch ​

The .content-stretch class sets the align-content property to stretch, allowing grid items to stretch along the block (column) axis.

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

Align Content Space Between ​

The .content-between class sets the align-content property to space-between, distributing grid items evenly with space between them along the block (column) axis.

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

Align Content Space Around ​

The .content-around class sets the align-content property to space-around, distributing grid items evenly with space around them along the block (column) axis.

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

Align Content Space Evenly ​

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

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

Align Content Baseline ​

Specifies 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.