Grid layout with CMS restrictions
Hey! I have an issue where I'm pretty sure it's not possible but want to ask just in case. I have a grid container with 3 columns, which is a template in a theme.
Inside this container there are only 2 items, and I need to center the 2 items across the whole container (disregarding their columns).
Now due to how the template is set up, it would be much easier if this was possible but I'm pretty sure it isn't. I'll have to go in and edit a ton of styling. Is this the only way?
6 Replies
just override the css. You can make it what ever you want
Yup! Only problem is that there's a separate list right under it - which is a grid with 3 columns. The client wants the first list's (the grid with only 2 items in it) items to be the same size as the second list, while being centered.
I got the go ahead to change the styling of the second list from my manager, so I'm thinking I just change the lists to flex containers with flex-wrap, and then put a min-width/width on my items.
I know you don't have all the specifics, but let me know if you think that's a good solution or if you have any other suggestions!
or you make it a 6 column grid.
for the first list you span each item over 3 columns
and the second list you span each item over 2 columns
That would cause the first list's items to be bigger than the second list's items, no?
I didn't think about that though 🤔
hard to tell without actual insight. But i think you have some ideas now
Yup! Tyvm! I'll update here if I'm running into any issues
Ended up going with the flex solution. Thanks for letting me rubber ducky Mark!