Campus Design System

Appearance

Grid Auto Flow ​

Utilities for controlling the flow direction of automatically placed grid items.

Class NameCSS Equivalent
grid-flow-rowgrid-auto-flow: row;
grid-flow-columngrid-auto-flow: column;
grid-flow-densegrid-auto-flow: dense;
grid-flow-row-densegrid-auto-flow: row-dense;
grid-flow-column-densegrid-auto-flow: column-dense;

Grid Flow Row ​

The .grid-flow-row class sets the grid-auto-flow property to 'row', allowing grid items to be automatically placed in rows.

html
<div class="grid grid-flow-row gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Grid Flow Column ​

The .grid-flow-column class sets the grid-auto-flow property to 'column', allowing grid items to be automatically placed in columns.

html
<div class="grid grid-flow-column gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Grid Flow Dense ​

The .grid-flow-dense class sets the grid-auto-flow property to 'dense', allowing grid items to be automatically placed with optimization for available space.

html
<div class="grid grid-flow-dense gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Grid Flow Row Dense ​

The .grid-flow-row-dense class sets the grid-auto-flow property to 'row-dense', allowing grid items to be automatically placed in rows with optimization for available space.

html
<div class="grid grid-flow-row-dense gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>
1
2
3

Grid Flow Column Dense ​

The .grid-flow-column-dense class sets the grid-auto-flow property to 'column-dense', allowing grid items to be automatically placed in columns with optimization for available space.

html
<div class="grid grid-flow-column-dense gap-m w-full">
  <div class="[...]">1</div>
  <div class="[...]">2</div>
  <div class="[...]">3</div>
</div>
1
2
3