Multi-Size Grid With Margins

Multi-size grid layout by default won’t fit perfectly if you use margins. If you want the grid to fit perfectly you will need to setup your image sizes a little bit different.

Frst we need to select our magins we want to use. In this example we will use 20px margins. It’s important you select for all screen sizes that have more than 1 column the same margins.

Select margins
Select margins

Now we can go into changing image sizes. Portfolio big image will be our base size and it will be 1000x1000px. Because the margin is 20px we need to make our images by 20px smaller.

  • Portfolio Thumbnail – 480x480px
  • Portfolio Landscape – 1000x480px – the width is the same as Portfolio Big and the height is smaller by 20px
  • Portfolio Portrait – 480x1000px – the height is the same as Portfolio Big and the width is smaller by 20px
Image sizes
Image sizes

After changing image sizes you will need to regenerate your thumbnails. The final grid should now look like this.

Multi-Size Grid
Multi-Size Grid