
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 must 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;
}