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) →