
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.