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
gapproperty 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-spanproperty.
Don’t hesitate to use it in your next project!
To learn more tips about CSS, make sure to join my newsletter below ❤️