Create Randomized Spacing in Portfolio Grid

Last Updated: Jun 18, 2018
Note: 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, you can add this code either in the Global CSS editor under Customize > Advanced, or on a page-by-page basis under the Branding tab's 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.
17c96688a1a336f6040dd1b6149c3fa8@semplicelabs.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete