Skip to main content

Columns block

The Columns block creates a multi-column layout inside a post or page. Each column can hold any other blocks — paragraphs, images, lists, even nested theme blocks.

Provided by the flexweg-blocks must-use plugin.

Inserting​

/columns in the inserter. The block inserts with two equal-width columns as the default. Each column starts with an empty paragraph.

Editing​

Each column is a regular block container — click inside one and use any of the inserter / typing / paste workflows you'd use elsewhere. The column's content is independent.

The columns block's inspector (right sidebar, Block tab) lets you:

  • Column count (2-6) — adding columns inserts new empty columns at the right; removing columns merges their content into the previous column
  • Per-column width — drag the divider in the editor preview to resize, or enter widths as percentages in the inspector
  • Stack on mobile — toggle whether columns stack vertically below a breakpoint (default: yes, breakpoint at 768px)
  • Gap — gap between columns (default: 1.5rem)

Markdown round-trip​

The block is stored as an attrs marker at the top:

<div data-cms-block="core/columns" data-attrs="<base64-{count: 3, widths: [40, 30, 30]}>"></div>

Each column's content is then nested as Markdown within <div data-cms-block-column="0"> markers. The publisher's filter resolves the layout into responsive CSS-grid HTML at publish time.

Published HTML​

<div class="cms-columns" style="display: grid; grid-template-columns: 40% 30% 30%; gap: 1.5rem;">
  <div class="cms-columns-col">
    <p>Column 1 content</p>
  </div>
  <div class="cms-columns-col">
    <p>Column 2 content</p>
  </div>
  <div class="cms-columns-col">
    <p>Column 3 content</p>
  </div>
</div>

Mobile responsive (when stack-on-mobile is on):

@media (max-width: 768px) {
  .cms-columns {
    grid-template-columns: 1fr !important;
  }
}

This CSS is injected once into the page's <head> (deduplicated across multiple Columns blocks on the same page).

Limitations​

  • No nested Columns block in v1 — you can have core / theme blocks inside a column, but not another Columns block. Nesting would complicate the inspector + publish-time render.
  • No row/column reordering by drag — columns can be added or removed via the inspector, but not reordered. Workaround: cut/paste content between columns.
  • No equal-height columns by default — columns size to their content. Themes can override with CSS targeting .cms-columns > .cms-columns-col.

Continue​