Layout

layout.grid#

Type: false | string

Default: false

CSS class(es) on the layout grid wrapper (data-block="layout").

• false — uses the built-in class rx-layout-grid (display: flex, gap: 24px)
• string — your own class name(s), space-separated for multiple classes

Also used when parsing existing HTML: a <div> with these classes (and column children) can be mounted as a layout block even without data-block="layout".

const app = Redactor('#entry', {
  layout: {
    grid: 'my-layout-grid'
  }
});

Default input/output:

<div data-block="layout">
  <div data-block="column" style="flex-basis: 50%;">
    <p>…</p>
  </div>
  <div data-block="column" style="flex-basis: 50%;">
    <p>…</p>
  </div>
</div>

Custom class input/output:

<div class="my-layout-grid">
  <div data-block="column" style="flex-basis: 50%;">
    <p>…</p>
  </div>
  <div data-block="column" style="flex-basis: 50%;">
    <p>…</p>
  </div>
</div>

layout.column#

Type: false | string

Default: false

CSS class(es) on each column <div> (data-block="column").

• false — no extra classes; columns are identified by data-block="column" only
• string — class name(s) added to every column; also used to recognize column elements in imported HTML

Column width comes from flex-basis (set by layout pattern or JSON width), not from this class.

const app = Redactor('#entry', {
  layout: {
    column: 'my-layout-column'
  }
});

Default input/output:

<div data-block="layout">
  <div data-block="column" style="flex-basis: 50%;">
    <p>Left</p>
  </div>
  <div data-block="column" style="flex-basis: 50%;">
    <p>Right</p>
  </div>
</div>

Custom class input/output:

<div data-block="layout">
  <div class="my-layout-column">
    <p>Left</p>
  </div>
  <div class="my-layout-column">
    <p>Right</p>
  </div>
</div>

Or with layout.grid setting:

const app = Redactor('#entry', {
  layout: {
    grid: 'my-layout-grid',
    column: 'my-layout-column'
  }
});

Input/output:

<div class="my-layout-grid">
  <div class="my-layout-column">
    <p>Left</p>
  </div>
  <div class="my-layout-column">
    <p>Right</p>
  </div>
</div>

layouts#

Type: object

Default:

{
  single: { title: '## layout.single-column ##', pattern: '100%' },
  'two-columns': { title: '## layout.two-columns ##', pattern: '50%|50%' },
  'three-columns': { title: '## layout.three-columns ##', pattern: '33%|33%|33%' },
  'four-columns': { title: '## layout.four-columns ##', pattern: '25%|25%|25%|25%' },
  '60-40': { title: '60/40', pattern: '60%|40%' },
  '40-60': { title: '40/60', pattern: '40%|60%' }
}

Preset map for the layout dropdown. Each entry:

Keys are preset ids passed to layout.insert({ pattern, grid, classname }).

Add or replace presets:

const app = Redactor('#entry', {
  layouts: {
    'hero-split': {
      title: 'Hero 70/30',
      pattern: '70%|30%'
    },
    'two-columns': {
      title: 'Half / half',
      grid: 'grid grid-cols-2 gap-4',
      classname: 'rounded-lg bg-slate-100 p-4',
      pattern: '50%|50%'
    }
  }
});