div with masonry layout inside another masonry layout

Question

My question is: i have a container with masonry layout, is possible that one or more item have inside another container with masonry?

  <div class="masonry">
    <div class="item"></div>
    <div class="item">
      <div class="masonry_inside">
          <div class="item_inside"></div>
          <div class="item_inside"></div>
          <div class="item_inside"></div>
      </div>    
    </div>  
    <div class="item"></div>
 </div>

Answer 1

You will have to init Masonry seperately on each grid container:

// Init masonry on outer container
$('.masonry').masonry({
  itemSelector: '.item',
});

// Init masonry on inner container
$('.masonry_inside').masonry({
  // You need to use another item selector class on the inner elements
  itemSelector: '.item_inside',
});

.masonry {
  width: 440px;
  background-color: gray;
}

.item {
  width: 200px;
  background-color: black;
  margin: 10px;
}

.item_inside {
  width: 80px;
  margin: 10px;
  background-color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

<div class="masonry">
    <div class="item" style="height: 150px;"></div>
    <div class="item" style="height: 200px;"></div>
    <div class="item" style="height: 180px;"></div>
    <div class="item">
      <div class="masonry_inside">
          <div class="item_inside" style="height: 180px;"></div>
          <div class="item_inside" style="height: 80px;"></div>
          <div class="item_inside" style="height: 120px;"></div>
          <div class="item_inside" style="height: 35px;"></div>
      </div>    
    </div>  
    <div class="item" style="height: 80px;"></div>
 </div>