Как кастомизировать грид в карусели slick slider?

Как создать такой грид используя библиотеку slick.? Пробовал манипуляции с flexbox, но выходит очень коряво =)

$('.posts-curousel').slick({
  rows: 2,
  dots: true,
  arrows: false,
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 3
});
.posts-curousel .slick-list {
  margin-left: -30px;
}

.posts-curousel .slick-slide {
    margin-left: 30px;
} 

.posts-curousel .posts-carusel-item {
    position: relative;
}

.posts-curousel .slick-dots {
    bottom: -20px;
    left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick.css" />
<link rel="stylesheet" type="text/css" href="https://kenwheeler.github.io/slick/slick/slick-theme.css" />
<div class="posts-curousel">
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
  <div class="posts-carusel-item">
    <div class="post-thumbnail">
    <a href="#">
      <img src="https://clevelonly.maxdroplet4.maxburst.dev/wp-content/uploads/2022/04/blog-image.webp" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">
    </a>
    </div>
  </div>
</div>


Ответы (0 шт):