Column Count

The thing that I love most about CSS is there is always something new that I learn about. I feel like at least once a week I hear about something that I have never used before. There might be a browser supporting something new or an updated spec being proposed.

I also think that Microsoft upgrading Windows and IE at a much faster rate is going to open a new world for a lot of us. Most of the time I think I assume that I can’t use a lot of the new specs.

I started playing with CSS columns the other day while trying to manage a large list. I think that sometimes you get stuck using what you know, and you can easily forget some of these new toys exist. Now, I just created the most basic example of all time. But you can see from the syntax there are a few awesome potentials. It could help with manipulating lists and even creating some new and layouts.

.example-list {
  list-style:none;
  columns: 10px 4;
  column-gap: 0;
}

See the Pen Column-count by John Siwicki (@siwicki) on CodePen.

CSS 3 Spec