Grid rows are changing their size

I have three grids on my site: One for , the other ones for and . and are grid childs as well as grid parents.

In I want to position images. The first one with the latern worked. However in case of the second, the girl, I really have problems and I have the feeling I don’t understand Grid at all :sweat_smile:

More concrete: I want to position the girl image within the grid, a bit under the latern image.

At the moment, the girl starts at row 6 and is overlapping the latern slightly. So I change the start to row 8. What happens? It moves down to row 8 but because the rows itself become way taller, it moves far more down as I wanted. Changing it back to start 7 makes it a bit better, but is still not what I want.

Here the page: practice css grid
and here the repo: GitHub - ChristophGrothe/lumos

Hope anybody can help?


.girl {
  grid-area: 5/3/10/6;

One thing that helped me understand grid was realizing that we don’t have to make our entire page one giant grid. With a navbar at the top, a large “hero” picture (or whatever it’s called, etc., trying to fit these into a grid might overcomplicate the rest of our site. You can start the grid whever you want and just have one section of your site in a grid.

Or another way, you could make as many rows as you need for each piece of content. So 1 row for navbar, 1 for lantern, and one for the girl. You can have them automatically size for each picture, or you could set row size to make sure they conform to what you want.

Hope that made sense

Thanks, you helped me :slight_smile: