Features, Tutorials

Create Magazine Inspired Text Layouts on the Web Using CSS Columns

Elvis Krstulović

Since Builderius Website Builder version 0.13.0. we have introduced a native CSS columns feature to provide users with an elegant way to design multicolumn layouts for continuous text. It is important to note that this feature is not equivalent to what many Page Builders as well as Gutenberg Block editor refer to as the “Columns”. In such cases these are layout elements usualy powered by flexbox layout to provide multicolumn page layout. These are separate containers and the text cannot naturally flow from one column to another. The best way to achieve columns layout where content can flow from one column to another is to use CSS Columns, which I am goint to present here.

1. Prepare some layout structure

A screenshot showing text content in single column and the builder UI on the right

We are going to set everything using the html element that wraps all the text content. Inside of it you can notice we are using a mix of elements such as Headings and Paragraphs.

2. Columns controls overview

A screenshot showing text content in single column and css column related settings in the builder panel

Click on the module that wrapps the text content, then go to CSS settings and search for “Column”. You should see these settings appear.

  1. Columns field is where you can set the number of columns you would like to have
  2. Columns gap field sets the distance between the columns
  3. Column rule sets the style for a “vertical rule” or a line that is to appear between the columns
A screenshot showing text content in three column layout and the coresponding values in the column settins in the builder UI.

3. Adding responsive controls

Similar to minmax() approach ofen used with CSS Grid to control the minimum with of the grid item, after wich the number of columns changes, columns field enables you to do almost the same. This syntax is a shorter version of “column-count” and “column-width” properties.

A screenshot showing text content in three column layout and the Column field value set to break to two columns if the column width drops bellow 200px.

Here I set the layout where my columns will be 200px wide at minimum.

A screenshot showing text content in three column layout before it is going to swap in two columns.

As I am reducing the width of the screen I came to the point close to 200px width of my columns (see tooltip in the image).

A screenshot showing text content in two column layout.

And when the screen become too small to acomodate the 200px column width if there are more then 2 columns, the layout rearanges into a two column layout.

And this is it, we have created a responsive, multicolumn text layout without using breakpoints, with Builderius Website Buidler version 0.13.0. without custom CSS code.

All posts

You might also like

Features, Releases Builderius Free & Pro, a New Life for the Free Version
Elvis Krstulović

Cookie settings

Our website uses some essential cookies to function well. With your permission, we would like to set up some additional cookies to improve your experience. Our Privacy Policy