The Columns block allows you to place content side-by-side in a flexible layout. Each column can contain its own blocks, such as headings, images, buttons, or paragraphs.
Columns are commonly used to create multi-column text layouts, feature grids, call-to-action sections, or side-by-side media and content.
Columns automatically stack vertically on smaller screens to ensure the layout remains readable and accessible.
Example
The default column behavior where there is no content flow among columns.
Clear Layout Structure
Columns are best used to organize related content into visual groups. For example, a page might place an image in one column and supporting text in another, helping readers quickly understand the relationship between the elements.
When designing column layouts, keep the content simple and avoid placing too much information side by side.
Responsive Behavior
On smaller screens, columns automatically stack vertically. This ensures the content remains readable on phones and tablets.
Because of this behavior, content should still make sense when read from top to bottom rather than relying on readers scanning across columns.
Options
Variations
Layout
The Layout variation removes the space between columns, allowing blocks to sit directly next to each other. This is useful when columns are used purely as a structural container, such as for image grids or tightly grouped content.
Flow
The Flow variation allows content to flow automatically across multiple columns. While editing, all content appears in a single column. On the frontend, the content is distributed across multiple columns based on the available space.
Flow Layout Example
Paragrah 1
The Flow variation allows longer content to flow across multiple columns automatically. This approach is often used in editorial layouts such as magazines or newsletters where text is presented in narrow, readable columns.
Paragrah 2
While editing the page, all content can be placed in a single column or in separate columns.
Paragraph 3
On the published page, the content flows into additional columns when enough space is available. This behavior adjusts automatically depending on the width of the screen or container.
Paragraph 4
Because the content flows continuously, it works best with longer sections of text rather than independent blocks that need to remain grouped together.
Paragraph 5
Flow layouts can improve readability by reducing line length and creating a more balanced visual rhythm across the page.
