Grid First, Flex Third

March 31, 2025

A stylized UI element with a blue header labeled 'Alex.Party' and a white content area containing the text 'GridFirstFlexThird'

I’ve been mulling this topic for months now, and I’m pretty firmly of the opinion if you are attempting to do some layout in CSS, you should reach for display:grid first, followed by display:block, followed by display:flex. Grid allows the layout element to be in control of how things get placed, where as flex really relies on the children to define their widths, which most of the time is not how layout should function at all.

Source: Grid First, Flex Third

Now I rarely use grid and use flex all the time–perhaps it’s because my common use cases are different to Alex, perhaps because I’m familiar and comfortable with flex (it took some time to transition from floats to flex)–but perhaps it’s time for me reconsider.