Portfolio Exercise. Big problem with grids

Portfolio Exercise. Big problem with grids
0

#1

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.


#2

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


#3

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.