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%;
}
}
Love this post?
Support me by subscribing to my blog and/or buying me a cuppa:
