Portfolio Exercise. Big problem with grids

Just working through the portfolio exercise. Am trying to use grids to make some links, with thumbnails, to my previous 4 exercises.

Initially I had a 2x2 grid (ignoring the heading), and each grid cell was an anchor element. I managed to align the image and title nicely like this. However, the whole grid cell was “clickable” I wanted the image and title to be the only things clickable so I created another div around the anchor element, trying to achieve something like shown in the image below. ie i want the red box to be what I can click on, rather than the whole blue box.

Anyway I tend to add borders to stuff when I’m building up a page so i can visualise whats happening better when I make changes. Look whats happened when I apply a red border the anchor element… What the hell is going on?!

I also can’t figure out how to align the items centrally anymore. Nothing seems to work.

https://codepen.io/AlexofSmeg/pen/bjYzBV

Much appreciated if someone can tell me exactly how to make this look like how i want it in the attached image.

I think I figured out how to get what i wanted without that extra (.grid-box) div. I always got confused when I put “justify-items” into sublime text because it doesn’t change to blue and italic so i assumed it didn’t work and just deleted it. Well, it turns out it does work and gave me exactly what I wanted.

solved