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!

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!