6 replies

Flexbox or Grid?

I'm trying to build this UI here (see screenshot)

I wanted to add the flex wrapping behavior for mobile responsiveness, but also am having trouble figuring out what I am supposed to do with flex basis or grow or shrink.
If I give each tile

flex: 0 0 588px

flex: 0 0 588px

, then they are not dynamic and they just "pop" onto the next row as I shrink the viewport. When I use

flex: 1 1 588px

flex: 1 1 588px

as shown in the codepen, the tile that wraps to the 2nd row grows to take up all of the available space. Ideally, I want the top row to distribute the space as evenly as it can, and then match the width of each tile in the 2nd row (a faux grid). The idea being that each tile has a minimum width of 588px and will go to the next row if it falls below that. Then if we are on a really narrow viewport, the width can drop below 588px.

Here is the code pen link to what I have so far:
https://codepen.io/Chris-Rowe/pen/xbKOyEe

Am I just overlooking an obvious way I can set up grid with auto columns to do this?

These tiles with words in them are the V1 MVP of the feature we're rolling out but the tile components may each have their own unique layout of various bits of information. Eventually I will put container queries on these guys and treat each one like a little viewport