Heydon Pickering avatar Heydon Pickering

The Flexbox Holy Albatross Reincarnated

Screenshot of “The Flexbox Holy Albatross Reincarnated”

when you have three items, you’ll be happy with the three-abreast layout and accepting of the single-column configuration. But you might like to avoid the intermediary part where you get a pair of elements on one line followed by a longer element underneath.

A great responsive layout trick, without any Media Query, so also usable inside a component of any width, awesome!

As mentioned in Heydon's post, Rémi Parmentier already wrote 3 years ago about his Fab Four technique to create Responsive Emails without Media Queries, but I like how Heydon uses custom properties to make it easier (Yes, Remi could obviously not have used them back then.)

We still do need container/element queries, anyway, for other responsiveness needs!

  1. screenshot of gridless.design

    Donnie D'Amato avatar Donnie D'Amato


    The web is good at these things, just not in the ways that designers have been accustomed to working. We'll take a look at how we got here and how we might change our perspective. Let's think outside of the grid and allow other guidelines to provide a comprehensive layout.

  2. TIL @​media not (min-width: 60rem) { … } doesn't work in Safari, while it works in Chromium and Firefox.

    Safari requires a media type, like all.

    So here's the "right" syntax:
    @​media not all and (min-width: 60rem) { … }