How to Use and Style CSS Columns

Last updated on September 3rd, 2020 by Steck Insights Leave a Comment

What are CSS Columns?

CSS Columns are a great way to visually break up text or lists into columns.

Why CSS Columns

It allows you to get around having to use floats. Anyone who has worked in CSS knows that no one really knows how floats work. I will have to write another blog article soon a bout how floats work. However, today I am just going to show a simple alternative to floating everything all the time. 

How to Use CSS Columns

Using CSS Columns is really simple. You just need to add column-count: 4; to the wrapper of the elements you want to show up in columns. Obviously, the 4 can be replaced with any number. If you simply want to visually separate your text into columns place this css rule on the div or span that is wrapping the text. If you are trying to get a list to show up in columns add it to the <ol> or <ul> that is wrapping the <li>’s.

Example of Text

Example of List

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum urna sed bibendum imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus.
• Nulla feugiat lacus eget tempor facilisis. Pellentesque malesuada tortor condimentum, iaculis mi eget, vulputate orci. Nulla rutrum diam at sapien pellentesque hendrerit. Pellentesque vel dolor vitae dolor elementum condimentum. Nullam et arcu a felis hendrerit venenatis.
• Curabitur condimentum lorem nisi, tempus accumsan urna vestibulum eu. Fusce et varius augue. Cras pulvinar tempor leo a faucibus. Aenean ut viverra mi. Aenean malesuada quis urna ac ullamcorper.
• Aliquam leo dolor, vulputate nec scelerisque vitae, feugiat non odio. Praesent blandit neque placerat sem ullamcorper, porttitor maximus lectus posuere. Integer interdum mi at mi laoreet tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut id eros quis est facilisis pharetra. Vestibulum sit amet velit ullamcorper, facilisis felis non, viverra erat. Aenean luctus at massa vitae fringilla.

What’s Up With the Weird Styling?

Many times when using columns, specifically with lists or other elements that are not just text, you get the columns breaking in less than ideal places. This creates messy styling and makes the content hard to read, which defeats the whole point. There is a lot you can to from a styling perspective to try and fix this, but there is one quick fix that works almost every time. That trick is to add break-inside: avoid; to the items being wrapped. In case of a list add it to the <li> This will result in much more readable columns. 

Example of a list with the break-inside: avoid;

• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum urna sed bibendum imperdiet. Interdum et malesuada fames ac ante ipsum primis in faucibus.
• Nulla feugiat lacus eget tempor facilisis. Pellentesque malesuada tortor condimentum, iaculis mi eget, vulputate orci. Nulla rutrum diam at sapien pellentesque hendrerit. Pellentesque vel dolor vitae dolor elementum condimentum. Nullam et arcu a felis hendrerit venenatis.
• Curabitur condimentum lorem nisi, tempus accumsan urna vestibulum eu. Fusce et varius augue. Cras pulvinar tempor leo a faucibus. Aenean ut viverra mi. Aenean malesuada quis urna ac ullamcorper.
• Aliquam leo dolor, vulputate nec scelerisque vitae, feugiat non odio. Praesent blandit neque placerat sem ullamcorper, porttitor maximus lectus posuere. Integer interdum mi at mi laoreet tempus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut id eros quis est facilisis pharetra. Vestibulum sit amet velit ullamcorper, facilisis felis non, viverra erat. Aenean luctus at massa vitae fringilla.

ul {
column-count: 4;
}
li {
-webkit-column-break-inside: avoid;
          page-break-inside: avoid;
               break-inside: avoid;
}

Please let us know if you need help with your WordPress website! We have a team of awesome WordPress Consultants ready to help.