Single List with Multiple Columns ala CSS3

Long lists need to be displayed differently on different devices generally. CSS3 can ease your pain by dividing these up for you via the column-gap property.

Apply your css like so:

Create a simple:

Render!

To extend this, you can then utilize media queries to have a different number of columns on different devices / screen sizes. This will keep your lists together, if they are long, rather than needing to divide them up in order to make them “look” even in the page.

Check out a demo or view it below…


1

Don’t go psycho nesting those SASS selectors

SASS

Nesting in SASS is wonderful, but also can become a NIGHTMARE! “Simple pictures are best” as one of my kids books always reminds the subjects. As a super simple idea.. Make sure your top level selectors are set before you zero in on specifics.

is an easy way to make sure all those links are white, however, making the “a” selector color at the parent level white would be better and simple to maintain.

Layout your project with the most generic selectors solidified at a parent level and then only overwrite what is necessary, when it is necessary.