CSS & tailwind -정사각형 이미지 만들기

next14 + tailwind

      <div className="grid grid-cols-3 gap-2 p-4">
        {photos.map((image) => (
          <div
            key={image.reviewId}
            className="relative w-full overflow-hidden pb-[100%]"
          >
            <Image
              src={image.imageurl}
              alt=""
              fill
              className="absolute top-0 rounded-lg object-cover"
            />
          </div>
        ))}
      </div>

원하는 결과값!