I am trying to understand grid and images with it.
To my understanding… my code should create a 3x2 grid and the first two spaces in that grid should currently have images which are 1fr of the screen. Instead my image is the full size.
I have removed the area template. The “section” section is assigned to my “project-grid” which means the following elements should start the grid correct?
I guess I don’t know if my issue is with the grid or the picture not being contained to the grid….
The downside to “self teaching” is you can’t just sit down with someone a talk over something that I am sure would take all of 30 seconds for me to comprehend if I could have a conversation about it.
But I’m not really sure what you are trying to do. You have created 3 columns and 2 rows for two images and I’m not sure where exactly you want them to go? They also won’t scale down without some more code (look at how to make responsive images).
You really can’t use a tool you haven’t learned. So take some time to go through MDN and other resources.
…the difference between what you think it will create and what is actually created, pesky computers, right ?
Take your time, browse through the resources linked by other posters above, there is a lot of (necessary) guidance waiting to be read
ah, since I learned css grid like one month ago (and fought with it), I would recommend this resource CSS Grid Layout because you can learn and practice at the same time (more fun, in my opinion)
If i understand your assessment right, you are wrong. grid-remplate-rows/columns sets the size of grid rows/columns respectively, while grid-template-areas can set areas within the grid body and isnt directly related to regulating sizes of columns and rows, it rather set sizes for grid items, which is proportionate to the columns/rows they take.