Create Multi-Column Layouts with CSS Columns. No Grid or Flex Needed

Did you know you can create a column layout without grid or flex?

It only takes 2 lines of CSS and can be useful!

One key advantage is the ability to easily add separators between columns.

So how to implement it?

Apply the columns property to your container. This property accepts up to two values:

• The minimum width of a column (not mandatory)
• The number of desired columns (mandatory)

And just with that it works!

But you can go further by:

• Using the gap property to create spacing between columns.
• Adding separator with the “column-rule” property (it works just like border).
• Make an element span across all columns with the column-span property.

Don’t hesitate to use it in your next project!

To learn more tips about CSS, make sure to join my newsletter below ❤️