Grid not auto-sizing properly

Design help Layout & Design
1

Hello,

I am following this webflow tutorial on CSS grid to create a full-page style masonry grid portfolio.

I have duplicated and triple checked the style settings, but when I set grid height to 800 px, the content overflows the boundary box.

Settings:

  • Grid height set to 800 px.
  • Image class “img2” 100% width 100% height and fit to cover.

I would like the grid to cover the whole page (width 100vw and height 100vh) with 4 columns and 3 rows. If I add content later, then content keeps populating lower and the user scrolls to get to lower content.

Thanks! Not sure what’s wrong here :sob: … I tried to follow the tutorial instructions twice but no joy. I may play around with throwing the images into a div and see what that does.

Here is my site Read-Only: https://preview.webflow.com/preview/portfolio-demo-d1dc02?utm_medium=preview_link&utm_source=dashboard&utm_content=portfolio-demo-d1dc02&preview=6bf946f062de763bd4f11e6867226de2&workflow=preview

publish link:
https://portfolio-demo-d1dc02.webflow.io/

2

@learyjk I believe it is because of the height of your images. You’ll notice that in the Webflow tutorial their images have a smaller height than the parent grid spaces. Since the rows in your grid are sized by auto, your rows are getting their height from the images inside them. So in your case you could do a couple of things.

If you don’t really care that the grid has a height of 800px you could set the height of the grid to auto and set a max-height of about 250px on your img2 class.

If you do want your grid to have a height of exactly 800px, the best solution is to set the height of each of your four grid rows to 1FR. Now each of your rows will be exactly 1/4 of the height of your grid minus the gap between rows. Then go to your img2 class and set overflow to hidden. This will cut off any part of the photo that doesn’t fit within the parent element.

Hope this fixes your problem!