Over the past couple of months, our group over at the @NDWebTeam has been redesigning the main ND.edu website. What we quickly realized is that ND.edu has a lot of lists. And since part of our design process was to have the site scale from mobile to wide-screen, we wanted to make use of css3 columns to shiny-up those lists. In the past, we would have floated the list items with set widths, but this is 2012 and we don’t want to do that anymore. Outlined below is the progression our designer Philip Zastrow and I went through to get these lists functioning how they should.
So first thing to do is set the column count and gap. This is where we ran into our first problem.