Portfolio Exercise. Big problem with grids

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.

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.



By default, div elements have a display property value of block, so your divs with class=“project-title” will be clickable on the right all the way over to the right edge of each grid-box.

To fix this, get rid of the div surrounding the project titles. Next, put display: block in the project-pic class, so the image takes up the entire line and remove the margin property all together from this same class. Finally, set the padding of the grid-box class to 15px.