Help with grid in portfolio

Hello,

I am currently having difficulty placing items were I want them inside a grid area. I created a grid area that is 3 rows by 4 columns, and I have tried to place specific items in the correct areas inside of that grid, but when I do, they all go to the bottom of the grid area between columns 3/4 and rows 3/4 all layered on top of one another. I originally named the grid area based on the project name and image. I thought that might have been the problem so I changed it to something else, but it didn’t resolve the problem. I would like to make it into a template format so when I add projects to it later, I would be able to add them easily, bu that is not the focus of the problem at the moment.

A link below will be provided and thank you for taking the time out to help me.

Link:
https://codepen.io/letsfundthee/pen/oNjVwLZ

Hello~!

I’m going to attach the MDN for grid-template-areas.

First, you’ve got grid-template-area instead of grid-template-areas.

Second, your elements need to be given a grid-area value in their CSS so the grid-template-areas knows what each value is connected to.

1 Like

You have got to be kidding me, I have went through all this troubleshooting and all was missing was an ‘s’ at the end of one command. LOL SMH

Thanks for the help. I left off the template area so people could see what I was going for. I was going to show my testing page along side it, but I thought it would have been too confusing, so I left it out (That may have been a bad way of approaching it though).

Thanks again for the assistance,