Tribute Page Help - Img and grid

I’m having trouble getting my image to listen to the grid formatting. Please take a look at my page here and see if you can provide some advice.

What are you trying to get it to look like? It looks like the display matches the code written, to me. https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas

I also noticed grid-template-columns line in body is missing semicolon and the ‘z’ is missing in font-size.

Thanks for the response and catching the typos.

If I comment out the image the grid matches the way I’m trying to get it to look. It seems like the image doesn’t size itself correctly to it’s parent div (tmiddle). I’m trying to have the image resize itself by following the formatting of tmiddle. Hopefully that makes sense.

Sorry, I’m not getting it 100%. I’m guessing that you don’t want the image to be full width in most circumstances though?

Yes, sorry it’s tough to explain. I want the image to keep it’s aspect ratio but at the same time stay within the div I created. As it is now the image seems to spill over into the ‘bmiddle’ container. As I understand it each of the containers are supposed to be the same size because of this statement:

grid-template-rows: 1fr 1fr 1fr 1fr;

However my image of Plato keeps taking more space than he is allowed.

Oh ok. Yeah I see it now. I was having that issue recently. I’ll try to remember/find the solution

Ok so, this is kind of a cop-out on my part, but why not avoid using a grid completely? It’s only one column, so just using divs should be fine, unless I’m missing something. I’ll keep looking into the grid bleed issue though

That’s a fair call out and I could do that. I was trying to use grids just to learn how they work with images. It’s frustrating because I feel like I must be missing something simple but…

Oh man haha I found it. It’s a missing ‘>’ on the img tag in your html. Does that make it do what you want?

edit: I’m still getting used to syntax highlighting, but this really illustrates why it’s so handy!

Wow, yeah that was it exactly. For some reason Atom(text editor I’m using) didn’t call this out and I obviously didn’t notice. Thanks a bunch!