It’s messy unfortunately I don’t know of a way around it. This doesn’t pay attention to the list container width, so if your container is skinnier than your screen, you need to adjust your breakpoints accordingly. This limits the width of the items in the final row and brings them inline with the above content. We also have to factor in the gutter for Safari, otherwise we can end up with a max-width being set before the column number changes. In our example, to get our breakpoints, we’ll use multiples of the min-width. Depending on the screen width, we add a max-width to the item that matches the percent width of the columns minus the gutter (so if you had 5 columns with a 10px gutter, the max-width would be calc(20% - 10px)). The one way I know to solve this requires some media queries. Some people may enjoy this look, but it can look like a bug (especially if the design doesn’t include an item background): This is because flexbox expands the columns in that row so combined they fill 100% of the width. One interesting side effect of this is that when the number of items isn’t evenly divisible by the number of columns, the width of the items in the last row doesn’t match the widths of all the previous rows: Now we have columns that grow/shrink in number depending on what fits, without resorting to any media queries. We add a left/top margin to all of our items, then adjust for that extra space in our container, like so: Instead, we use a simple workaround to achieve our desired result. We really need :last-column-in-this-row but I don’t think that selector exists. Using :last-child won’t work, since the last item in a column could be items 4 and 8 of 9 total.

Adding a margin-right to our items would add that space, but also causes the last item in every row to have a right margin that just isn’t needed.

Spacing OutĪll of our content is smushed together, leaving out some precious whitespace. The content still shows fine, just not as concise.įor more details on flexbox browser support, check out the flexbox page.Īlso, because Safari and IE10 require browser prefixes, I recommend using a tool like Autoprefixer to help out. In many instances (where usage is <1%), the fallback of a single column of items is an acceptable compromise (I’ve gone this route for a recent project). Flexbox in general just doesn’t work there. I should probably get this out of the way: this won’t work if you have to fully support IE9 or below. If not, go check out CSS Trick’s Complete Guide to Flexbox for a great intro. I’m going to assume right now that you’re already familiar with flexbox and how this works. The task was fairly simple: with a list of N items, display them in X columns that grow and shrink with the container width (where N is a number dependent on number of results and X is a number dependent on screen width).

On a recent project, I’ve had some fun using flexbox to create a responsive, multi-column list that’s easy to set up and flexible with various size content.

Yet there are features under the hood of flexbox that do more than just make it easier to do what we’ve already done. Even-height columns, layout re-ordering, sticky footers on short pages all things that Flexbox makes dead simple (except for, as usual, a few browser bugs here and there). Yet it brings many other capabilities to the table, such that I think it’s one of the biggest advancements we’ve had on the front-end for quite some time. If all Flexbox brought us was sane vertical centering, I’d be more than overjoyed with it. Thankfully, Flexbox has saved the day in that regard. Those two simple words used to bring fear and trepidation to anyone having deal with the shortcomings of vertical-align: middle.

Two columns responsive layout