How can I achieve this two column reusable layout?

I want to create a reusable component using NextJs and tailwind where information will be fetched from an api and a map function will be used to display into a two column staggered layout. On the right hand side column the divs should start at the middle of the left hand side div and the left hand side div should start at the end of the right hand side div and so on.

I have achieved this layout with grid but I am unsure if my code for this layout is best practice. Please help.

 <div className="grid grid-cols-2 w-full justify-items-center">
          {array.map((value, index) => (
            <div
              key={index}
              className={`${
                index % 2 === 0
                  ? index === 0
                    ? "mt-0"
                    : ""
                  : "mt-64"
              } 
               bg-white px-4 pb-5 flex flex-col justify-between items-center font-medium text-sm tablet:text-[1.0625rem] w-[60%] largeMobile:w-[377px] pc:h-[500px] pc:w-[600px] text-justify`}
            >
              **Content**
            </div>
          ))}
        </div>