yes just put each project in a div and give it a gridarea
name. let me know if you are confused on what I mean by that
CSS grid is perfect for that. Note that you misspelled grid-template-columns
and grid-template-rows
in your CSS.
You may want to group the image and its caption in a <div>
. Otherwise the image will take one column of the grid, and the caption in another column, like this (I turned on Firefox’s Grid Inspector to make the grid more apparent):
This is what it looks like by wrapping them in <div>
s:
You may want to be more specific with what kind of layout you want to achieve (like how many columns you want to have, etc.)