Skip to main content
Unlayer Docs

ColumnLayouts

ColumnLayouts is a predefined enum of common column ratios. Each value maps to a cells array.

import { ColumnLayouts } from '@unlayer/react-elements';

<Row layout={ColumnLayouts.OneColumn}>             {/* [1]         -> 100% */}
<Row layout={ColumnLayouts.TwoEqual}>              {/* [1,1]       -> 50% + 50% */}
<Row layout={ColumnLayouts.TwoWideNarrow}>         {/* [2,1]       -> 67% + 33% */}
<Row layout={ColumnLayouts.TwoNarrowWide}>         {/* [1,2]       -> 33% + 67% */}
<Row layout={ColumnLayouts.ThreeEqual}>            {/* [1,1,1]     -> 33% each */}
<Row layout={ColumnLayouts.ThreeNarrowWideNarrow}> {/* [1,2,1]     -> 25% + 50% + 25% */}
<Row layout={ColumnLayouts.FourEqual}>             {/* [1,1,1,1]   -> 25% each */}
<Row layout={ColumnLayouts.FiveEqual}>             {/* [1,1,1,1,1] -> 20% each */}

Custom Ratios​

If none of the presets fit, pass cells directly:

<Row cells={[3, 1]}>
  <Column>{/* 75% */}</Column>
  <Column>{/* 25% */}</Column>
</Row>

cells is the raw form layout uses internally. Use layout for readability and cells for one-off ratios.

validateColumnLayout​

Exported helper if you want to validate a layout before rendering:

import { validateColumnLayout, ColumnLayouts } from '@unlayer/react-elements';

validateColumnLayout(ColumnLayouts.TwoEqual, 2); // ok
validateColumnLayout(ColumnLayouts.TwoEqual, 3); // throws

See Also​

  • Row — where layout and cells are applied.
  • Column — children validated against the selected layout.