demo · v135

::column — Post-layout only: no-op property explorer

::column is a post-layout pseudo-element — it can only paint and snap-align existing columns, not resize or reflow them. Setting width, margin, padding, or font-size on ::column is silently accepted by the CSS parser but has zero effect on layout. This demo lets you try both groups side by side so the constraint becomes tactile, not just theoretical.

Working properties on ::column

Column 1 — some text here to fill the column with content.

Column 2 — another block of text filling the second column.

Column 3 — final column with more example prose content.

Column 1 again — continues wrapping into the first column.

More content across the columns to show column-rule clearly.

Last item in the carousel to confirm all columns are visible.

::column { }

WORKS Select a property above to see it take effect.

No-op properties on ::column (silently ignored)

Column 1 — some text here to fill the column with content.

Column 2 — another block of text filling the second column.

Column 3 — final column with more example prose content.

Column 1 again — continues wrapping into the first column.

More content across the columns to show no-op clearly.

Last item in the carousel to confirm columns are unchanged.

::column { }

NO EFFECT Select a property above — columns will not move.

Property reference

Property	Works on ::column?	Reason
`background`	✓ yes	Post-layout paint only
`column-rule`	✓ yes	Post-layout paint only
`scroll-snap-align`	✓ yes	Affects scroll snap, not layout
`border`	✓ yes	Post-layout paint only
`width`	✗ no-op	Columns are sized by the parent's `columns` rule
`margin`	✗ no-op	Column spacing is set by `column-gap`, not margin
`padding`	✗ no-op	Padding on a fragment box has no layout meaning
`font-size`	✗ no-op	::column doesn't contain text nodes
`height`	✗ no-op	Column height is determined by the container
`display`	✗ no-op	Cannot change the display type of a fragment box

/* ✓ These WORK — post-layout paint and snap */
.container::column {
  background: lightblue;
  column-rule: 2px solid navy;
  scroll-snap-align: start;
}

/* ✗ These are silently IGNORED — layout is already done */
.container::column {
  width: 200px;     /* no-op: column width set by parent `columns` rule */
  margin: 1rem;     /* no-op: use column-gap on the parent instead */
  padding: 0.5rem;  /* no-op: fragment boxes don't have padding */
  font-size: 2rem;  /* no-op: ::column doesn't hold text nodes */
}

Property reference

see also