Skip to content
pagecraft

Grid Builder

Audience: Editor.

The Grid Builder is a small bundled section pack plus a pair of column-split shortcuts. It's the fastest way to lay out a section without building columns by hand.

Bundled sections

Open the section picker → Grid Builder category. Seven sections ship out-of-box:

  • 1 Column — single full-width column with a heading + paragraph stub
  • 2 Columns — two equal columns
  • 3 Columns — three equal columns
  • 4 Columns — four equal columns
  • 5 Columns — five equal columns
  • Wide + Narrow (2/3, 1/3) — first column 66.6%, second auto-fills
  • Narrow + Wide (1/3, 2/3) — mirror of the above

Each is a plain is-section with an is-container and the column structure. Drop one in and start editing — text and images are immediately editable.

Column split buttons

ContentBox's column popup ("…" icon when you select a column) gets two extra buttons:

  • Horizontal split — adds a sibling column to the right of the active column. The new column inherits styling, so 1+1 split into 2+2 quickly.
  • Vertical split — divides the active column vertically into two stacked nested rows. Useful when you want a column to contain its own mini-grid (image on top, text underneath, both inside the same outer column).

The buttons read builder.activeCol / .cell-active to find the target column, so they only fire when a column is actually selected.

When to use which

  • Bundled section — when you're starting a new section from scratch and want a clean layout in one click.
  • Horizontal split — when an existing 2-column section needs to become 3 without losing content.
  • Vertical split — when one column needs to hold two stacked elements that should resize independently of the rest of the row.

Reference

  • Section seed data: Page_craft_upd::seedDefaultSections() in upd.page_craft.php (inserts the 7 rows on every install/update; idempotent)
  • Column-split logic: Actions/EditorFrame.php lines 876–1027
  • Bundled CSS / JS: themes/user/pagecraft/assets/grid-builder/grid-builder.css and grid-builder.js
  • Generated picker entry: themes/user/pagecraft/pagecraft-sections/pagecraft-sections.js (regenerated by SectionFileWriter; see Editing Existing Templates)