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:

HTML

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

CSS

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 number of columns for this division, modify column-count attribute in CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *