Col

The Col component complements the Grid component by allowing you to create responsive column layouts. Specify the number of columns a child element should occupy:

<Container>
  <Grid $xsCols={1} $lgCols={3}>
    <Col $lgSpan={3}>
      <Input type="text" $fullWidth />
    </Col>
    <Button $variant="primary">Save</Button>
    <Button $variant="secondary">Cancel</Button>
    <Button $outline>Remind Later</Button>
  </Grid>
</Container>

In this example:

• The first column spans 1 column on xs screens and 3 columns on lg screens.
• The second and third columns span 1 column at all breakpoints.

Properties