How to use repeat and minmax?

Question

Hello I have a question how can I use repeat and minmax in grid in tailwind. I did something like this and it did not work.

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-[repeat(4, minmax(100px, 500px))]  ">
      <div className="w-32 h-32 rounded-full ">
        <Image src={Btc} alt="" />
      </div>

      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
    </div>
  );
};

Answer 1

Remove any spaces inside

grid-cols-[repeat(4,minmax(100px,500px))]

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-[repeat(4,minmax(100px,500px))]  ">
      <div className="w-32 h-32 rounded-full ">
        <Image src={Btc} alt="" />
      </div>

      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
      <p>
        Hello <span className="block ">123</span>
      </p>
    </div>
  );
};