I do lists in columns sometimes.

A few people have asked me how, so I’m sharing it here. I can’t find the link I got it from, and I edited it a bit, but that’s the great thing about shared snippets — you edit them as you need to.

The goal

The goal is to create either two or three responsive columns. So, a 50% (two) column will collapse into one when the width shrinks, while a 33% (three) column will collapse into two columns, then one column as the width shrinks.

The .column class

You can name it literally anything, but I keep shit simple by just using “column” for the name of my class. If you’re newish to CSS, the period (.) before column denotes to the CSS language that it’s a class. Avoid confusing it with ID, because they lead to the oddities that prevent it from working properly. 🤷‍♀️ As Georgie puts it,

• classes = multiple uses, while
• IDs = one use.

The code

Edit it to your liking. 💁‍♀️

@media all and (min-width: 600px) and (max-width: 900px) {
    .column,
    .column2 {
        -webkit-column-count: 2;
        -webkit-column-gap: 4%;
        -moz-column-count: 2;
        -moz-column-gap: 4%;
        column-count: 2;
        column-gap: 4%;
    }
}
@media all and (min-width: 900px) {
    .column {
        -webkit-column-count: 3;
        -webkit-column-gap: 2%;
        -moz-column-count: 3;
        -moz-column-gap: 2%;
        column-count: 3;
        column-gap: 2%;
    }
}