Grid + Image Help

Hey y’all!

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.

Thanks y’all.

You either want to use:

  1. grid-template-columns X grid-template-rows OR
  2. grid-template-areas, but not both.

If you want to use the first one, you have to define in CSS, which Child element starts from what column/row and the span, or where it ends.

If you want to use grid template areas, you have to define in css, which Child element occupy the spot defined in the grid-template-areas.

You can google for grid and flexbox cheatsheets that suits you, or refer to MDN to learn more. https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Thanks for the info.

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.

I would specify dimensions for your images, your codepen will look like this :slight_smile:

If you use grid-template-areas you need to place the grid children using grid-area.

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.

1 Like

Perfect thanks… I thought that telling the object to “contain” would automatically fit inside the “1fr” box.

…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 :slight_smile:

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)

1 Like

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.

1 Like

Yea, you’re right. We can do it that way. Thanks for the correction.

1 Like