Columns
With columns you can create a print-inspired layout with little added markup that can adapt beyond a fixed canvas. A supported browser will make calculations to wrap and balance content into tidy columns. If you’re already working with a fluid layout, the columns will reflow automatically. With the right combination of properties, CSS columns can be an interesting layout option that is responsive-friendly while degrading gracefully.
Professional examples
The below stated examples are commonly applied in online website designs. The code is available for you and offers you the possibility to edit it to your own creation!
Equal Height and Width Columns using Flexbox (without bootstrap)
See the Pen Equal Height and Width Columns using Flexbox by Karen Menezes (@imohkay) on CodePen.
Basics
Need to learn more about creating columns? We recommend you to checkout w3schools.
Learn how to make columns
The video's below are carefully selected and give you a clear explanation of how you can build this module yourself.
CSS Columns - Kevin Powell
CSS Columns are awesome! You can easily create multi-column, repsonsive layouts WITHOUT media queries. I don't see them used a lot these days, and there is no excuse considering how good browser support is (even IE fully supports it, I mean, what else can we ask for!).
The two main properties are column-count and column-width, but I also take a look at column-rule and column-gap, as well as the columns shorthand.
CSS Multi-Columns - Awesome Newspaper Style Layouts (NO Flexbox or Grid) - DesignCourse
Today, I'm going to show you how to create layouts for content heavy pages using CSS multi-columns. This technique doesn't utilize flexbox or the grid, but instead, it uses a series of properties that allows you to easily structure columns and rows for this type of layout.