Columns (Block)


The Columns block is one of the most frequently used blocks. It offers that author the ability to intuitively describe a desirable desktop layout that gets a responsive adaptation for smaller breakpoints.

Most authors spend the majority of their time on desktop, which makes the visual similarity of a Columns layout in their word processor with the desktop layout of their website intuitive and allows us to take hints from the number of columns that are used in the word or gdoc layout.

The most popular use of the Column block is probably to use two columns on desktop and responsively switch to one column on mobile.
This block decorates the number of columns in authoring as special CSS class on the block, which allows the developer to style two, three, four etc. columns differently without adding any complexity from a javascript standpoint.


See Live output

Content Structure:

See Content in Document


This code is included in boilerplate, there is no need to copy it.

Boilerplate Block Code