HTML/CSS/GRIDs Pseudo-selectors and classes

Hi there. In the HTML-2 course/Grid topic/Exercises/Gallery Pseudo-selectors doesn’t work. It sounds weird but when I tried to expand a 3-rd photo to 2 columns horizontally and 2 rows vertically it does nothing:
.gallery img:nth-of-type(3)
grid-column: 2 / 4;
grid-row: 1 / 3;
I’ve used classes:
.img3 {
grid-row: 1/3;
grid-column: 2/4;
} and it works.
Windows 11, VSC
Does anyone have the same problem or it’s just me? :grinning:

Hi it works for me, im on windows 10. Check the class name of your img container is indeed ‘gallery’

Thanks for helping, when I literally copied and pasted Moshe’s code it’s OK. May be problem was somewhere else in my code, may be with sizing items, but anyway thank you

I don’t really get what 1fr means in this case

This was captured from asking chatGPT that question.

1 Like

Its a fractional unit. Because its relative value and not fixed it allows us to build more responsive layouts. This is why Mosh recommends to size your grids in this unit. You can think the bottom rules to be the same. It just means 3 columns and each column take up 1 even unit of available space. Which means all 3 columns are equal in size or 1/3-1/3-1/3, they are all the same fraction. if we had 1fr 1fr 2fr then the 3rd column would be the same size as the first two columns so its 1/4-1/4-2/4 in fractions.

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);