CSS Grid footer columns layout wrapping
Hey! I’m working on a site for a client and I hit a massive roadblock with the footer. See attached screenshot of Figma design. On smaller screens it’s straight forward, the columns just stack. However, the problems start with larger screens.
Here’s my attempt on Codepen: https://codepen.io/Framboos/pen/wvLJewP
The first and last columns are static and will stay the same (first has a logo and social media icons, last has newsletter signup form). However, all the columns in between come from a CMS, so there’s no telling how many will there be and how many items will they contain, so the code has to be as future-proof as possible.
I got as far as replicating the exact design from Figma and it works fine if the screen is large enough and there are only 3 dynamic columns, but if we shrink the viewport or add more columns, it all starts overflowing cause the columns don't wrap onto the next rows. The columns wrap nicely if I change
grid-auto-flow from column to dense, but then the 3rd dynamic column goes next to the 2nd one instead of under it.
I consider myself very good at CSS but this is just completely wrecking me haha. 🥲 I’ll appreciate any ideas!
9 Replies
Could you put the CMS columns in their own grid?
@Chris theoretically yeah, but wouldn't that mean that if the container can't fit the first static column + all the CMS columns in one row, all the CMS columns would go onto the next row? Instead of having the static column and only as many CMS columns as would fit.
I suppose it depends on how you expect it to work as the number of CMS columns increase and how "flexible" the design is meant to be.
I would be tempted to use a single column for smaller screens (i.e. without the auto-fit minmax trick) and use a media query to show 3 columns on wider screens.
The centre column would contain it's own grid (or possibly flex) for the CMS columns
Something like this https://codepen.io/cbolson/pen/eYwvRjY
However, I realize that I may be well off the intended functionality
@Chris oh this looks promising! I'll experiment with it a bit, thank you
@Chris Hm but again we got the issue that in the Figma design, Dynamic 3 goes under Dynamic 2, and in both of our solutions it goes next to it if
grid-auto-flow is anything but column. Which prevents them from wrapping :(
Maybe you need to look at using
columns rather than grid for the CMS columnsTried that too with not much success either haha. :( Thank you for your help though!
If using columns, again, I would use media queries to define the number of columns.
in the Figma design, Dynamic 3 goes under Dynamic 2This is a very specific thing for the designer to define. Is this really a fixed design element or are they just trying to show that the design should be flexible?
@Chris I figured it out! I think haha
Updated Codepen: https://codepen.io/Framboos/pen/RwzpLwz
Thank you again for your help, you put me on the right track