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.
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)