CSS Dynamic Columns

Let me introduce you to a very interesting concept of CSS, It’s css-columns.
This property is very handy if you want to distribute a content dynamically into multiple columns.
Let us suppose you a mapping over array of objects which represent form elements (lets say check-boxes). You want to divide the check-boxes into 2 equal columns and it should be dynamic i.e should adjust elements according to the number of elements.
Thus wrapping them under css-columns property is the best way to tackle this problem.
The property is as follows:

columns: 200px 2;

This is a shorthand property, which means the columns will be 200px wide and the column count is 2.
Just add this property to the wrapper and see the magic.
If you are interacting with the form element and if some other form element toggles its display then you might need to add display: inline-block to that form element, otherwise css-column may shift your parent form element to another column and thus it will break the UX.

display: inline-block

Stay tuned for more tech related articles.