Grid & Column

The Grid and Column atoms are the bedrock of the Curva & Concreto layout system. They enforce a strict 12-column geometry, ensuring that content aligns cleanly without arbitrary padding values scattered across feature code.

Basic Usage

By default, <Grid> creates a 12-column CSS Grid container. <Column> spans all 12 columns on mobile, but you can override this for larger breakpoints using sm, md, and lg.

<Grid gap="1rem">
  <Column span={12} md={6} lg={4}>
    <div style="background: var(--papel-20); padding: 1rem; border-radius: var(--r-1);">Col 1</div>
  </Column>
  <Column span={12} md={6} lg={4}>
    <div style="background: var(--papel-20); padding: 1rem; border-radius: var(--r-1);">Col 2</div>
  </Column>
  <Column span={12} md={12} lg={4}>
    <div style="background: var(--papel-20); padding: 1rem; border-radius: var(--r-1);">Col 3</div>
  </Column>
</Grid>

Offsets

You can use the start prop on a Column to offset it within the grid. This is particularly useful for centering content or creating asymmetrical layouts.

<Grid>
  <Column span={8} start={3}>
    <div style="background: var(--azul-soft); padding: 1rem;">Centered 8-col</div>
  </Column>
</Grid>

Semantic Containers

Both Grid and Column accept an as prop to change their underlying HTML element, ensuring you don’t sacrifice document semantics for visual layout.

<Grid as="section">
  <Column as="article" span={12}>...</Column>
</Grid>

Props

Grid

Column