Unable to customize the first image grid

[Md. Abu Hanif]

Unable to customize the first image grid: The desired behavior is for the first item to have a col-span-2 and row-span-2, but this functionality is currently not functioning as expected. While using custom CSS, I can adjust the width and height, but this causes other items to overflow.

<GridContextProvider onChange={onChange}> <GridDropZone id="image-grid" boxesPerRow={5} rowHeight={280} style={{ height: 280 * Math.ceil(images.length / 4) }} className="grid grid-cols-5 gap-4" > {images.map((image, index) => ( <GridItem className=" cursor-grab" key={image.src} index={index}> <div className={${
index == 0 ? "col-span-2 row-span-2 bg-green-400" : ""
} relative group} > <input type="checkbox" disabled={loading} checked={checkedImages.includes(image)} onChange={() => handleCheckboxChange(image)} className={absolute top-5 left-5 transform scale-150 cursor-pointer group-hover:opacity-100 ${
checkedImages.includes(image) ? "opacity-100" : "opacity-0"
} z-10} /> <img src={image.src} alt="image" draggable="false" className={border shadow-sm rounded-lg w-full h-full m-auto transition-opacity duration-300 ${
checkedImages.includes(image) ? "opacity-60" : ""
}} /> <div className={bg-black rounded-lg absolute top-0 left-0 w-full h-full transition-opacity duration-300 ${
checkedImages.includes(image)
? "opacity-10"
: "opacity-0 group-hover:opacity-40"
}} ></div> </div> </GridItem> ))} </GridDropZone> </GridContextProvider>

[Amdadul Islam Raihan]

I don't believe they're updating this anymore. If you're skilled in Typescript, you might want to attempt to resolve it. I tried, but I couldn't figure it out as I'm not proficient in Typescript.