Multicolumn

Multicolumn is a row of text columns: a heading and a short paragraph in each. It is a preset of the flexible Section, built from one Horizontal content block that holds the columns. See Sections, blocks, and groups for how presets and blocks fit together.

It appears in the Add section list under Layout.

Add it

1. In the theme editor, open the page you want it on.
2. Click Add section.
3. Under Layout, choose Multicolumn.

It starts with three columns, each holding a title and a short description as Text blocks. Open each Column in the section's blocks to edit its text. To add or remove a column, add or delete a Column block under the Horizontal content block. Reorder columns by dragging them in the block list.

How columns wrap

The columns sit in one row that fits as many as the width allows. The Horizontal content block controls when they reflow, on its own settings.

• Minimum column width: the narrowest a column gets before the row changes, from 160 to 500 pixels. Below this width the row becomes a swipeable carousel with dots, instead of squeezing the columns. Raise it to force the carousel sooner (wider columns), lower it to keep more columns in a row. It starts at 280.
• Gap: the space between columns, in pixels.
• Column content alignment: where the text sits inside each column. Left, Center, or Right.
• Accessibility label: text read by screen readers when the row collapses to a carousel. Leave it blank to use the default.

The block also has a Size group with Limit width and, once that is on, Max width, plus its own Inherit color scheme and Color scheme controls and standard Padding and Margin. See Common section settings.

Section settings

Multicolumn is the Section, so the band around the columns uses the full set of section controls: the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility. See Common section settings.

Multicolumn mobile grid

The Layout group has a second preset, Multicolumn mobile grid. It is the same section tuned for narrow items:

• Four columns instead of three.
• Minimum column width set to 160 (the lowest the control goes) instead of 280, so the columns stay in a two-up grid on phones instead of collapsing to a swipeable carousel.
• A tighter Gap (20 instead of 32), and smaller text sizes in each column.

Pick Multicolumn when each column carries a title and a real paragraph. Pick Multicolumn mobile grid for short items that read fine at half a phone's width: origin, weight, roast level, allergens. Everything else on this page applies to both.

Tips

• The starting columns hold Text blocks, but a column can hold any block. Add an image, a button, or an icon inside a Column to build a richer card.
• To keep every column in a row on tablet instead of dropping to a carousel, lower Minimum column width. To give each column more room, raise it.
• For uneven column widths (one wide, one narrow), use a Proportional group instead. See Sections, blocks, and groups.