Tailwindcss流体网格

Question

我通常使用这一行css来为宽度为20rem的项目获得一个流畅的网格：

‘grid-template-column: repeat(auto-fit，minmax(20rem，1fr))；’‘

我可以使用css实用程序类来做这件事吗?或者有什么方法可以扩展它来做这件事吗？

Answer 1

没有实用程序类可以做到这一点。如果你想扩展Tailwind并为grid-template-columns添加一个定制的实用程序类，你可以在你的tailwind.config.js中添加如下内容：

module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'fluid': 'repeat(auto-fit, minmax(20rem, 1fr))',
      }
    }
  }
}

然后，您可以使用类grid-cols-fluid。