Columns

Props API

import { Columns, ColumnsProps, columnsStyles } from '@christiankaindl/lyts'

Use columns whenever you need extrinsic spacing behavior. That is, when you want the layout to not be influenced by the contents of its children. Common use cases for such behavior are footers, landing page sections and sidebar/detail views.

Customizing space distribution

Columns are extrinsically sized. This means that its children's width is determined by its parent (the Columns container). By default every child takes up 1 fraction of the available space, but this can be customized by the ratio prop (the example above has a ratio of "1/2").

// Edit the live code below
<>
<Columns ratio='1/3/1'>
  <Box />
  <Box />
  <Box />
</Columns>

<Columns ratio='1/2'>
  <Box />
  <Box />
</Columns>
</>

This behavior is perfect for landing page sections, where you want the exact same widths for every section. Columns also works great for sidebar layouts: you can set additional min- and max-width values on the sidebar to get dynamic sizing, all while staying in a legible width (the sidebar layout of this very site is using <Columns>! Check it out here)

Collapsing on small screens

To support mobile devices, Columns automatically collapses into a single-column layout when the container (not the viewport) reaches the width of collapseAt, such as "28em" in the example in the beginning (resize the window to try it out!).

The collapsing behavior is entirely managed with CSS, using a flexbox tequnique called "Holy Albatross", coined by Haydon Pickering. The breakpoint is based on the container's width, which makes it adaptive even when embedded on large viewports.

Examples using Columns