<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<div class="masonary-container">
  <div class="spacer">
    <div class="grid">
      <!-- <div class="grid-item grid-item--height2">title?</div> -->
      <div class="grid-item grid-item--height2">index</div>
      <div class="grid-item">1</div>
      <div class="grid-item">2</div>
      <div class="grid-item">3</div>
      <div class="grid-item">4</div>
      <div class="grid-item">5</div>
      <div class="grid-item">6</div>
      <div class="grid-item">7</div>
      <div class="grid-item">8</div>
      <div class="grid-item">9</div>
      <div class="grid-item">10</div>
      <div class="grid-item">11</div>
      <div class="grid-item">12</div>
      <div class="grid-item">13</div>
      <div class="grid-item">14</div>
      <div class="grid-item">15</div>
      <div class="grid-item">16</div>
      <div class="grid-item">17</div>

      <div class="grid-item">18</div>
      <div class="grid-item">19</div>
      <div class="grid-item">20</div>
      <div class="grid-item">21</div>
      <div class="grid-item">22</div>
      <div class="grid-item">23</div>
      <div class="grid-item">24</div>
      <div class="grid-item">25</div>
      <div class="grid-item">26</div>
      <div class="grid-item">27</div>
      <div class="grid-item">28</div>
      <div class="grid-item">29</div>
      <div class="grid-item">30</div>
    </div>
  </div>
</div>

<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

<script>
  // external js: isotope.pkgd.js, masonry-horizontal.js

  $(".grid").isotope({
    layoutMode: "masonryHorizontal",
    itemSelector: ".grid-item",
    masonryHorizontal: {
      rowHeight: 220,
      gutter: 1,
    },
  });
</script>
