Create randomized spacing in portfolio grid

We do not provide support for hacks, so use them at your own risk. If you're not comfortable with coding, we recommend against using this workaround.

To create a randomized layout for your portfolio grid, add this code under Customize > Advanced in the Global CSS editor, or on a page-by-page basis under Branding > CSS editor:

.masonry-item:nth-child(1n) {
  padding-top: 80px;
  padding-bottom: 50px;
}

.masonry-item:nth-child(2n) {
  padding-top: 190px;
  padding-bottom: 40px;
}

.masonry-item:nth-child(3n) {
  padding-top: 30px;
  padding-bottom: 70px;
}

.masonry-item:nth-child(4n) {
  padding-top: 20px;
  padding-bottom: 20px;
}

.masonry-item:nth-child(5n) {
  padding-top: 140px;
  padding-bottom: 10px;
}

You can adjust these values as needed to make your spacing more uneven or further increase the distance between your thumbnails.