Jason Knight
Feb 12, 2022

--

The behavior you describe is quite common when/if you have errors in your HTML, such as a missing/unclosed tag. If there's one place where browsers are still wildly dislike, it's in terms of error handling.

Though that's a wile unfounded guess since you didn't present your code.

To me, this doesn't look AT ALL like a case for display:grid. The data is uniformly formatted and styled, and that's where flex is usually vastly superior.

Set "display:flex; flex-wrap:wrap;" on the outer container, then set your inner containers to "width:34%; flex-grow:1;" and let natural wrapping do all the heavy lifting for you.

It's funny how people keep talking about flex as if it only allows you formatting and styling on one axis. If you leverage width and flex-wrap, that's not true at all.

--

--

Jason Knight
Jason Knight

Written by Jason Knight

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse

Responses (1)