Grid gap doesn't allow for nice layout

Hello! I want to make a portfolio for a photographer, but I can’t figure out how to make the grid layout work. All pictures used have an aspect ratio of 2:3 but they just don’t line up. If the math is right they should line up.

The site is only viewable in the biggest viewport, 1920px.

Can anyone help?


Here is my site Read-Only: https://preview.webflow.com/preview/sanne-wiering?utm_medium=preview_link&utm_source=designer&utm_content=sanne-wiering&preview=186ba447758d74a0afdd709e6f70c27f&pageId=6071e659f2b294a9fa33fb61&mode=preview

Hi Jesper,

it seems you haven’t set your Div element to a grid in your main breakpoint:

Everything you set up at the starred device at the top will take effect for all other devices. Since you set your Div to a grid in 1920p, it only appears there. More about breakpoints here.

One solution would be to select the starred device as seen in the screenshot and set the “Grid Fotografie” to grid-mode:

Grid fotografie

More about Grids here.

You can then edit the grid with the button below and set your preferred spacing, columns, and rows. As far as I can see they also line up.

Hope this helped!

Cheers
Leon

1 Like

Hi!

Thanks for your respond. However I meant something different. I have only set up the grid at the largest breakpoint (1080p), but if you open the website, the grid items don’t line up correctly. There is too much padding between the horizontal items. I hope anyone can help.