Flexible Columns

Featured Image

In this article, I'm going to explain how to format a division as multi-column. Only CSS Flexbox will be used. I'm amazed how CSS Flexbox is powerful, and easy. The two columns division follows:


We must add a class to our division. This is the only required change to HTML. In our case, the class name is flexColumns.


The following is required CSS:

.flexColumns {
  /* flexbox stuff */
  column-count: 2;
  column-gap: 3em;
  column-rule: 1px solid #000;
h1 {
  /* flexbox stuff */
  column-span: all;

That's all.

If you decide to change the number of columns for this division, modify column-count attribute in CSS.

Leave a Reply

Links are not allowed in comment field!

Your email address will not be published.