如何在宝石列表中进行水平滚动，以使其行为类似于DataGrid？

.gem-list-container {
  width: 100%;
  overflow-x: scroll;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

$(document).ready(function(){
  $('.gem-list').slick({
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  });
});

.gem-list-container {
  display: flex;
  width: 100%;
  overflow-x: auto;
}

.gem-list-item {
  flex: 0 0 auto;
  width: 200px;
  margin-right: 10px;
}