Learn CSS Grid with Pinegrow tutorial

Beginners
,
1

So I watched the entire series by @matjaz on learning CSS Grid with Pinegrow. It all worked as presented, with a just few differences in where things were located. All until I get to the last video where he positions the image over the header area. As he stretches the image across the page the height never changes. When I do that the height of my entire header area increases, to accommodate the height of the image. I can see when Matjaz does it his header area remains the same height.

Maybe I missed something, but the video series last showed the named area header row height set to “auto”, which I believe is what is causing my problem following along.

Did I miss something, or did something change?

2

Hi @hog, welcome to the Pinegrow community!

The image needs to have width:100% and height:100% in order to fit it into the available grid space. This changes the proportions of the image, so we also need to add object-fit: cover to have the image cover the available space while keeping its proportions.

In the tutorial, this is the CSS rule for the image with the class “poster”:

.poster {
    width: 100%;
    height: 100%;
    min-width: 100px;
    min-height: 170px;
    object-fit: cover;
    z-index: -1;
}

Check if the image has such styling. That should do the trick.

3

Thanks for the response @matjaz. I didn’t expect to get a reply from the big guy! :slight_smile:

Sometimes a picture is worth a thousand words. Well, in this case maybe a video. You will see in the attached video that I follow your steps exactly, but end up with a different result. You will also notice another problem I have in that Pinegrow does not seem to act the same way every time. I added the image, then when it didn’t work as expected, I undid the resize and then resized the image again, and as you can see the image takes up a different area the second time. I had to refresh the page view in order to get the picture to show the resize result the second time. Any thoughts on this?

When you say “The image needs to have width:100% and height:100% in order to fit it into the available grid space.” I think that is part of the problem, as the row height is set to “auto”. How does it know how much space to take up? I have watched your videos and been through the exercise many times, and that setting (auto) did not change (at least in the video). Maybe I missed something?

https://youtu.be/ec69wYbmpT4

Screenshot 2022-06-23 112253
Screenshot 2022-06-23 112253942Ă—626 67 KB

4

Thanks for the video @hog! After investigating, it appears that browsers changed the way how the auto row / column sizes are calculated. In the later versions, the poster image is taken into account and the auto row therefore stretches in order to accommodate the whole height of the image.

I recorded a course lesson update with a suggested solution of using a wrapper element with absolutely positioned child image.

2 Likes