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.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found