You’ve made them all the same height, so it’s not that there’s tons of space, it’s that they’re all the height of the tallest one (the last row) - grid-template-rows: 1fr 1fr 1fr; is saying you all want them the same. grid-template-rows: auto; will make them the height of the content in them. And as that’s the default, just removing that line completely has the same effect.
1 Like
thanks for the help man, much appreciated.
any insight to make the site look better?
It’s obviously personal to some extent, but I would:
- Bring the nav in line with the content.
- The footer is centered, so I would do the same with the nav, and the titles.
- You aren’t really using the grid here - you could actually remove it, or if you want to take advantage of it, cut the number of columns - you’re only really using one column as it is.
- Pad the sections, so that the text isn’t jammed against the edges.
- The cutoff at each side is a bit jarring - it might be better if the background colour went full width of the page - you could do this by putting the actual content in another div inside each section, putting a max-width on the inner div, and applying the background colour to the outermost one.
- The text is very big, i would drop the size quite a bit, it’s hard to read
- the colours are a bit hard on the eyes as well, they can be toned down a little (more acidic colours might be a lot more in keeping with the subject matter as well)