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
I consider myself very good at CSS but this is just completely wrecking me haha.
I’ll appreciate any ideas!
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!
