offset

You can check the full list of available breakpoints here.

How to use

  • *:offset-*
  • *:offset-fit-*

The offset works like a blank column that will stay before your column. You can move columns to the right by occupying the space corresponding to the number of columns you want to move.

To control the offset of a scol-fit you have to use offset-fit


<div class="line">
  <div class="x:scol-3">3</div>
  <div class="x:scol-3">3</div>
  <div class="x:scol-3 x:offset-3">3</div>
  <div class="x:scol-6 x:offset-3">6</div>
  <div class="x:scol-5">5</div>
  <div class="x:scol-2 x:offset-3">2</div>
</div>
3
3
3
6
5
2

offset-0

*:offset-0 class is used to cancel the set offset in case you don't need it at a higher breakpoint.


<div class="line">
  <div class="x:scol-4">4</div>
  <div class="x:scol-4 x:offset-4 m:offset-0">4</div>
</div>
4
4

*:offset-fit-0 class doesn't exist, *:offset-0 works for scol and scol-fit