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, 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 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
4 Replies
This is the undesired behavior (bottom row spans accross all 3 top pieces)
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
I used 300px because 588px does not maths right for my screen xDI'm embarrased at how easy that was to do. Idk why but I thought I was going to need flexbox and flex wrap for this because I've used both before in lots of places in our app.
Yeah the whole dev team has U-L-T-R-A-W-I-D-E-S
yea this is where either or has better pattern depending on what exactly you want.