Media Queries are the solution to your 1st problem, see codepen.io/iamschulz/pen/eYNLzOJ
Your second problem can be solved by using named grid areas. Flex is probably the wrong tool here, since it's made for one-dimensional layouts. You want to layout in two dimensions, so grid areas should be the way to go. Take a look here: css-tricks.com/snippets/css/comple...
Thanks, I definitely appreciate the effort you put into this, but I don't think those really work. As far as I can tell, the codepen works by hardcoding the minimum column and gap width to add up to 1560 or less if the screen is >1570, and to add up to 2160 if the screen is shorter than that, to prevent four from fitting. But that only works for 5 columns - it breaks down if I add a 6th column, which some of my category indexes have. It seems like it requires the CSS to know how many columns there are, which kind of defeats the point (with the way I'm doing it, I can at least have just one JS function that works for all of the indexes and changing the column or gap width only requires changing the one number in a clearly marked place).
As for grid areas, I'd read about those a bit but I think they also work by hardcoding what areas each one gets, which again I don't think works responsively. On sufficiently narrow screens, it can't really fit one image-card alognside the recent-comments element, so recent-comments is moved to the bottom. There might still be a way to combine this with media queries to make an improvement, but I'm not sure.
You can bypass the hardcoding by using a CSS variable for your number of columns and using calc to calculate the grid layout
I tried but apparently CSS variables don't work in media queries, so I can't use calc to determine the breakpoints based on the column width.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.