@bedrock-layout/columns v3.3.0

@bedrock-layout/columns

A layout helper component that creates an n-column layout.

Full docs at: bedrock-layout.dev

When to Use

The Columns can be used to create a columned layout consisting of n number of columns.

How to install

npm install @bedrock-layout/columns

or

yarn add @bedrock-layout/columns

Usage

Basic Usage

The following example creates a simple columned layout containing 5 columns of equal size.

import { Columns } from '@bedrock-layout/columns';

<Columns gutter='size3' columns={5}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</Columns>;

Usage with Column

@bedrock-layout/columns also contains a Column component which can be used within Columns to define individual sizes of the columns, using the span props, as shown below:

import { Columns, Column } from '@bedrock-layout/columns';

<Columns gutter='size3' columns={3} dense>
  <Column span={2}>
    <div>1</div>
  </Column>
  <Column span={2}>
    <div>2</div>
  </Column>
  <Column>
    <div>3</div>
  </Column>
  <Column span={3}>
    <div>4</div>
  </Column>
  <Column span={2}>
    <div>5</div>
  </Column>
  <Column>
    <div>6</div>
  </Column>
</Columns>;

data-attribute

For styling purposes, you can select data-bedrock-columns and data-bedrock-column for Columns and Column respectively.

API

Columns

* required

** By default, Spacings is one of spacing-constants values, but this can be overwritten using the ThemeProvider from @bedrock-layout/spacing-constants

Column