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

Leave a Reply

Links are not allowed in comment field!

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