--- title: Columns storybookPath: page-layout-columns--default isExperimentalPackage: false ---
---
title: Columns
storybookPath: page-layout-columns--default
isExperimentalPackage: false
---
Use the columns primitive to layout content in configurable columns.
Each child represents a single column. By default that column will span 1
fraction of the total number of children.
``jsx live`
The spacing between children can be adjusted using the gap prop.
`jsx live`
Columns can be aligned vertically using the alignY prop.
`jsx live`
Columns can be collapsed into a single vertical stack responsively using the
collapseBelow prop.
`jsx live`
If you need more control over how your columns are distributed, you can use the
template prop. template receives an array of numbers that represent the
relative width of each column.
`jsx live`
Box props are also included as Column props and are notdisplay
listed here (excluding , alignItems, gap, flexDirection,justifyContent and flexWrap).
Extra props are passed into the underlying Box` component.
[responsive-prop]:
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L11
[responsive-range-props]:
https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/themeUtils.ts#L130
[gap]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/columns/src/Columns.tsx#L17
[data-attribute-map]:
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1