Offset

To add a separation between elements from one column to the next you can add an <Offset /> element.

Offset takes one required parameter size which can range from 1 to 11 (inclusive). The size value indicates the number of columns that can be skipped.

Rationale

<Offset /> is an element derived from <Grid /> but without allowing children or any other properties.

It is meant as a more semantic alternative to adding an empty sized <Grid /> to achieve the same layout results.

Usage

To add a column after a certain element or from the start of a row, you can use <Offset size={size}/> where the size parameter is a number from 1 to 11.

The offset example showcases its usage. The demo is available here and the code here
.

Alternatives

<Offset /> is usually a last resort option. It ensures correct rendering at the expense of unnecessary markup.

In most cases you can extend the size of the preceding element or change the alignment instead. For instance if you only want a one column element on the last column you can write:

JavaScript

import { Grid, Col } from 'gymnast'

<Grid justify="right">
  <Col size={1} />
</Grid>

with offset it becomes:

JavaScript

import { Grid, Offset, Col } from 'gymnast'

<Grid>
  <Offset size={11} />
  <Col size={1} />
</Grid>

If there's more than one element on the same line, this could be achieved with:

JavaScript

import { Grid, Col } from 'gymnast'

<Grid>
  <Col size="auto" />
  <Col size={1} />
</Grid>