Column widths & the grid

A page-builder column stores its width as a top-level width key on the column item (sibling to type/atts/_items), using an N_M fraction string with an underscore — "1_2", "1_3", "2_3", "3_4" — not a slash. This page covers which widths are valid (twelfths and fifths), and how columns wrap (which differs between the default flex mode and legacy mode). These column tiles live in the Classic palette tab; new layouts use the modern Div instead.

The Classic palette tab offers the widths as ready-made column thumbnails (1/1, 1/2, 1/3, …); the "beliefs" band below is a real three-column (1_3) row on the canvas.

💡 Web dev tip: design layouts for the smallest screen first

A column that's 1/3 on desktop usually needs to become 1/1 on a phone — there's rarely room for three narrow slivers on a small screen. The per-device width overrides here exist for exactly that reason: mobile-first design starts by asking what a layout needs at its narrowest, then adds columns back as the viewport grows, rather than shrinking a desktop layout down and hoping it survives. MDN: Responsive design

Valid widths

Widths are the usual twelfths, plus the full set of fifths:

Width key	Fraction	Notes
1_1	1/1 (100%)	full width
1_2	1/2
1_3, 2_3	thirds
1_4, 3_4	quarters
1_6, 5_6	sixths
5_12, 7_12, 11_12, 1_12	twelfths
1_5, 2_5, 3_5, 4_5	fifths (20 / 40 / 60 / 80%)	rendered via the fw-col-*-{15,25,35,45} classes

The palette also offers an Auto Column (fills the remaining space).

Fifths now render on the Classic column too

The classic column supports all fifths — 1/5, 2/5, 3/5, 4/5 — via the grid's fw-col-sm-{15,25,35,45} classes (20 / 40 / 60 / 80%), so e.g. a 2_5 + 3_5 pair makes a clean 40/60 split. (Earlier builds only had 1_5.) Don't use width:"auto" to fake a width — an unrecognized width makes the corrector drop the column wrapper entirely; use Auto Column when you want a cell to take the leftover space.

These tiles live in the Classic tab

The column-width tiles are part of the Classic palette tab, alongside the Bootstrap containers. For a new layout, reach for the modern Div element instead — its Width control offers the same fractions (twelfths and fifths) plus content-sizing (Fit / Max / Min) and a custom px/%/rem/vw value, on a clean flex/grid Div.

Auto-flex (col) columns

A non-fraction width key — notably col, the Bootstrap 5 auto-flex column, or any custom key without an N_M shape — contributes zero to the row's fill accumulator (extract_fraction_from_column_width() returns 0/1). Auto-flex columns squeeze into whatever space is left and always "fit", so they never force a wrap.

How columns wrap

The items corrector groups consecutive columns into rows using a virtual _Page_Builder_Items_Corrector_Row_Container that accumulates each column's fraction. Whether it actually splits depends on a setting, decided in column_fits():

Default — Bootstrap 5 flex mode (recommended)

With Bootstrap 3 Legacy Mode unchecked (the default), column_fits() returns true for every column, so no auto-split happens: all of a section's columns stay in one .fw-row and CSS flex-wrap handles the visual wrapping. This is what lets Theme Settings → Default Gap Y apply spacing between wrapped sub-rows. The editor loads flex-canvas.css / flex-canvas.js in this mode so the canvas matches the flex front end (equal-height columns, clean wrap).

Legacy — Bootstrap 3 mode

With Bootstrap 3 Legacy Mode checked, the corrector uses the original fraction math: it adds each column's fraction to the row accumulator and starts a new .fw-row once the total would exceed 1 (12/12). This loads bootstrap-3-legacy.css and reproduces the pre-migration Unyson behavior — both pieces go together, so older content keeps its layout.

// _Page_Builder_Items_Corrector_Row_Container::column_fits()  (simplified)
if ( legacy_mode_OFF ) {
    return true;             // BS5 flex: never auto-split, flex-wrap handles it
}
$column_as_fraction->add( $this->accumulator );
return $column_as_fraction->to_number() <= 1;   // BS3: split when a row overflows 12/12

A developer-only static config flag disable_columns_auto_wrap (set by a theme) also forces true, for back-compat.

Per-device widths

Columns also carry responsive overrides mirroring the base width: w_phone / w_tablet / w_desktop (defaulting to "default"), plus offset_phone / offset_tablet / offset_desktop and alignment keys (align_self, content_v, content_h). The Desktop / Tablet / Phone preview toggle in the editor re-previews the canvas at each breakpoint so these are visible while you edit.