Column layout

Column layout in Storybook

ColumnsLayout component is used to layout pages in a columns-based shape, each column is represented by a GridLayout component and its content is the wrapped children between that GridLayout opening and closing tags.

ColumnsLayout extends the GridLayout component so that you can pass any other properties that GridLayout accepts.

onColumnsRearrange

It is invoked if:

• There is more than one column on the breakpoint, for example { phone: [1, 1] }.
• The current breakpoint has a different number of columns than the desktop breakpoint.

For example, there are 3 children provided to the ColumnsLayout component, and so on the desktop view, we have three columns [1, 1, 2]. Let's say that on tablet we set columns: [1, 2]. In that case, onColumnsRearrange is invoked.

Below is an example of the mergeColumnsToFirst variant implementation:

const mergeColumnsToFirst = (children, newColumnsNumber) => {
  // Compute how many columns have to be merged into first
  const numberOfColumnsToMerge = children.length - newColumnsNumber;

  const [firstColumn, ...restChildren] = children;
  // remove and get the columns to be merged into first column
  const columnsToMerge = restChildren.splice(0, numberOfColumnsToMerge);
  // Clone first column and inject children from removed column to it at the end
  const newFirstColumn = React.cloneElement(firstColumn, undefined, [
    ...childrenToArray(firstColumn.props.children),
    ...columnsToMerge
      .map((column) => childrenToArray(column.props.children))
      .flat(),
  ]);

  return [newFirstColumn, ...restChildren];
};

variant

The variant prop specifies how the columns are stacked or merged on the breakpoint. It is invoked under the same circumstances as onColumnsRearrange. The default behavior is to wrap the other columns under the first one.

There are four predefined variants:

• mergeColumnsToFirst: Merges children of the N columns after the first column to the first column.
• mergeColumnsToLast: Merges children of the N columns before the last column to the last column.
• stackColumnsToFirst: Takes N+1 first columns and wraps them together with GridLayout as the first column.
• stackColumnsToLast: Takes N+1 last columns and wraps them together with GridLayout as the last column.

N = D - T: is the number of columns that need to be reduced, where:

• D: number of columns on desktop,
• T: number of columns on tablet.

For example, if desktop has three columns, tablet has two columns, then N = 3 - 2 = 1.

<ColumnsLayout
  variant="mergeColumnsToFirst"
  tablet={{
    columns: [1, 1],
  }}>
  <GridLayout id="column-1">
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-2">
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
  <GridLayout id="column-3">
    <SomeElement />
    <SomeElement />
    <SomeElement />
    <SomeElement />
  </GridLayout>
</ColumnsLayout>