Just for fun and because I had some time I played around with this
It seems that I made that harder than it should be and I can lose all the grid placements except for the one recurring item
This makes it a lot easier especially if I lose the alternate coloured rows.
Keeping the alternate rows requires a little more code but still pretty neat. Here’s a version with media queries for smaller screens.
Finally the simpler version with media queries for alternate colors.
Yes flex is probably the way to go and the first example I gave in bootstrap (as per OPs attempt) was flex based but of course used nested rows. The flex layout will most likely need a max-width on the items to stop them blowing out with oversized content. The grid one will just overflow but not break the grid.
Flex probably makes more sense as we are not dealing with columns but grid will ensure that the integrity of columns is maintained.
I was really just testing out grid capabilities as it hasn’t become second nature yet for anything but the norm
I did have a second go at it, but it is virtually the same. I just thought it may be more efficient with min-width queries (mobile first) to have fewer resets. But it turned out there isn’t much in it.
In the end you have to repeat three things for media queries. i.e. Change the width, change the margin and re-set the margin on the previous one. I don’t think there’s much scope to reduce any more.
There was a similar process in the grid example where the grid-start had to be reset and changed and the width adjusted also. I used css variables but it didn’t really make it much shorter as you still had to change the variable.
It was an interesting exercise and the sort of puzzles I enjoy
Thanks for all the answers guys, much appreciated! I am fairly new to grid so I have chosen that one and had a play with it. I noticed that if I add grid-gap to add some spacing, that it adds an overflow, so I had to use margin instead. Is this generally the case with grid-gap?
Yes there are two trains of thought in that when the grid items are in percentage the grid parent can’t work out the width available properly as its a circular reference and you get overflow. If the items were in fr units there would not be a problem. Or it may simply be that 4 * 25% plus 20px gaps are too big
You can use minmax if you don’t want to use margin but use gap instead.