Easiest Masonry grid layout Tutorial for oxygen

Creating a Masonry grid layout in Oxygen Builder is a bit more complex than standard grid layouts because Masonry layouts require a bit of custom code. However, I can provide you with a step-by-step guide on how to create a Masonry grid layout in Oxygen Builder.

here are complete instructions.

Add grid class on repeater/div element

Add grid-item on repeater/div on each item

Add code block and put below script.

<!--  load imagesloaded. imagesloaded makes sure the images are not displayed until they are fully loaded -->
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!-- Step 3: we load masonry -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>        

Then add this jQuery code under JavaScript section

<!-- the script call -->

<!-- Now that everything is loaded we create a script to trigger masonary on $grid. Note that this simply says: "if the images are fully loaded, trigger masnory on $grid. -->

jQuery(document).ready(function($){
  $(".grid").imagesLoaded(function() {
    $(".grid").masonry({
      itemSelector: ".grid-item"
    });
  });
});        

Then add this Style code under CSS section. if you know oxygen styling then do without custom style.

/* how big should the gap be between grid items? remember that the total gap between two items would be double what you set here since both would have that amount set as their individual padding. Also add box-sizing:border-box to make sure the padding doesn't affect the total widh of the item */

.grid {
  text-align: center;
  max-width: 95vw;
  margin: 2.5vw auto;
}

.grid-item {
  padding: 5px;
  box-sizing: border-box;
  display:inline;
}


/* Step 4: Add media queries (subjective) to make the whole grid resposive. */

@media (min-width: 500px) {
  .grid-item {
    width: 50%;
  }
}

@media (min-width: 1000px) {
  .grid-item {
    width: 33.333%;
  }
}

@media (min-width: 1700px) {
  .grid-item {
    width: 25%;
  }
}

@media (min-width: 2100px) {
  .grid-item {
    width: 20%;
  }
}        

here quick demo video link - https://www.youtube.com/watch?v=m2gI94NGcwk

#Easiest #Masonry #grid #layout #Tutorial #oxygen