如何在顺风中使用重复和最小最大

Question

您好，我有一个问题如何在顺风网格中使用重复和最小最大。我做了类似的事情，但没有成功。

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

删除里面的所有空格

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>
  );
};

Answer 2

默认情况下，Tailwind 包含grid-template-column用于创建具有最大12 equal宽度列的基本网格的实用程序。您可以通过编辑theme.gridTemplateColumns或theme.extend.gridTemplateColumns在tailwind.config.js文件中自定义这些值。

所以你的 tailwind 配置文件应该如下所示

module.exports = {
  theme: {
    extend: {
     gridTemplateColumns: {
        // added new 4 column grid as new4
        'new4': 'repeat(4, minmax(100px, 500px))'
        }
    },
  },
  plugins: [],
}

并像这样使用grid-cols-new4。

const DetailedAssetCard = () => {
  return (
    <div className=" bg-gray-100 rounded-lg grid  grid-cols-new4  ">
      <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>
    </div>
  );
};

我在这里创建了一个很好的示例来了解更多信息。