I am using the slick slider library in my React project. I want to slide my elements like in the image below, but with slick slider, there is no way to structure it like this. If I set rows: 2, the alignment is equal in both rows. enter image description here

import React from "react";
import immobiliare from "assets/images/idealista_white.png";
import idealista from "assets/images/idealista_white.png";
import wikicisa from "assets/images/wikicisa_white.png";
import casa from "assets/images/casa_white.png";
import trovacasa from "assets/images/trovacasa_white.png";
import mioaffitto from "assets/images/mioaffitto_white.png";
import plusFiftyPortali from "assets/images/plus_fifty_portali.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";

const App = () => {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 6,
    slidesToScroll: 1,
    rows: 2,
    autoplay: false,
    autoplaySpeed: 2000,
    arrows: false,
  };

  return (
    
          <Slider {...settings}>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={immobiliare} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={idealista} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={wikicisa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={casa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={trovacasa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={mioaffitto} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={plusFiftyPortali} alt="brand_image" />
            </div>   <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={immobiliare} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={idealista} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={wikicisa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={casa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={trovacasa} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={mioaffitto} alt="brand_image" />
            </div>
            <div className="w-[203px] h-[203px] rounded-[10px] bg-[#FFFFFF1A] flex mr-[10px] items-center justify-center">
              <img src={plusFiftyPortali} alt="brand_image" />
            </div>
          </Slider>
     
  );
};

export default App;

My question is: What are the possibilities to structure elements like in the image and slide both rows?

Thanks in advance for checking it out. I really appreciate it!

I have tried using multiple rows, but the structure of the elements is not as I want. The alignment of the elements in both rows is the same, but I want the second row’s alignment to be centered beneath the first element in the first row. I expected the second row to shift to the center under the first element, but it didn’t. Here is the link to the documentation I followed: https://react-slick.neostack.com/docs/example/multiple-rows

My question is: How can I structure the elements to achieve the desired layout and slide both rows accordingly?