Flexbox Holy Albatross with CSS Grid

In succession to The Flebox Holy Albatross, Jonathan Snook wondered if he could recreate it using CSS Grid.

ℹī¸ To recap, with the Flexbox Holy Albatros a layout goes from either all items stacked next to each other (e.g. all horizontal) to all items stack on top of each other (e.g. all vertical):

There’s no intermediary state where a few items get wrap to new lines.

The short answer: yes. The long answer: yes, but only in browsers that support the CSS min() function, which is only Safari at the time of writing.

.selector {
    grid-template-columns: repeat(
        auto-fit,
        minmax(
            min(
                calc(1024px * 999 - 100% * 999),
                100%
            ),
            1fr
        )
    );
}

Flexbox Albatross with Grids (CodePen) →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.