我需要创建可扩展的可点击网格的帮助吗？

Question

我想创建一个可滚动的小部件。无限数量的行和2列。单击部分时，滚动到顶部，并扩大框的宽度以适合全宽，并禁用滚动，直到用户单击关闭。动画应该看起来像是展开框来自点击框。

$(document).ready(function() {
  var card = $(".product-card-container");
  var cardExpand = $(".product-card-expanded");

  function cardClick(e) {
    if ($(e.target).attr('class') == "product-card-container") {
      var elmntID = $(this).children()[0].id; // get ID of Second DIV
      var elmnt = document.getElementById(elmntID); // set ID to Scroll

      $(this).children('.product-card-expanded').addClass('clicked');

      elmnt.scrollIntoView({
        block: 'start',
        behavior: 'smooth'
      });
    }
  }

  card.click(cardClick);

  // 	Reset button
  $('.btn').click(function() {
    cardExpand.removeClass('clicked');
  });

});

.main {
  margin-top: 250px;
  margin-left: 100px;
  height: 300px;
  width: 590px;
  border: 1px solid #000000;
  border-radius: 4px;
  overflow-y: scroll;
  position: relative;
}

.main .product-card-container {
  width: 49%;
  display: inline-block;
}

.main .product-card-small {
  border: 1px solid #000000;
  border-radius: 4px;
  height: 150px;
  pointer-events: none;
  z-index: 1;
  background: #000000;
}

.main .product-card-expanded {
  border: 1px solid pink;
  border-radius: 4px;
  height: 150px;
  width: 47%;
  opacity: 0;
  z-index: -1;
  background: pink;
  transition: width 2s, height 2s, opacity 1s 2s, z-index 1s 2s, background 2s;
  position: absolute;
  top: 0;
  left: 0;
}

.main .product-card-expanded.clicked {
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 95%;
  height: 306px;
  opacity: 1;
  background: purple;
  z-index: 1;
  transition: width 2s, height 2s, opacity 0.3s, z-index 0.3s, background 2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main" id="main">
  <div class="product-card-container">
    <div class="product-card-small" id="card"></div>
    <div class="product-card-expanded" id="card-expand"></div>
  </div>

  <div class="product-card-container">
    <div class="product-card-small" id="card1"></div>
    <div class="product-card-expanded" id="card-expand1"></div>
  </div>

  <div class="product-card-container">
    <div class="product-card-small" id="card2"></div>
    <div class="product-card-expanded" id="card-expand2"></div>
  </div>

  <div class="product-card-container">
    <div class="product-card-small" id="card3"></div>
    <div class="product-card-expanded" id="card-expand3"></div>
  </div>

  <div class="product-card-container">
    <div class="product-card-small" id="card4"></div>
    <div class="product-card-expanded" id="card-expand4"></div>
  </div>

  <div class="product-card-container">
    <div class="product-card-small" id="card5"></div>
    <div class="product-card-expanded" id="card-expand5"></div>
  </div>
</div>

<button class="btn">Reset</button>