简而言之，RAM 代表Repeat（重复）、Auto（自动）和Minmax（最小最大）。这是一种常见的 CSS 网格布局模式。您可以在这篇文章中了解更多：

RAM - CSS 布局模式

在 Tailwind 中创建网格可能会有挑战性。想象一下，您必须创建一个随着视口增长和缩小的网格。就像这样：

您将如何在 Tailwind 中实现这一点呢？

将上述解决方案直接复制到您的代码中将会很简单：

<div class="grid-cols-[repeat(auto-fit,minmax(150px,1fr))] grid gap-4">
...
</div>

这样做是有效的，但使用 @marica.io/tailwind-ram 有一个更简单的方法。

@marica.io/tailwind-ram

首先，通过 npm 或您喜欢的软件包管理器安装插件。

npm i -D @marica.io/tailwind-ram

然后将插件添加到您的 Tailwind 配置中

// tailwind.config.js
module.exports = {
  content: [
    // ...
  ],
  theme: {
    // ...
  },
  plugins: [
    //...,
    require("@marica.io/tailwind-ram"),
  ],
};

您可以使用新的 ram- 类来为任何网格元素设置样式。这将确保网格项至少有 250px 宽，但它们会随着容器的增长而增长：

<div className="ram-[250px] grid w-full">{/* 项目 */}</div>

您可以在 Tailwind Playground 上尝试：

Tailwind Playground

默认是 auto-fit，如果您想使用 auto-fill，那么您可以使用 ram-fill：

<div className="ram-fill-[250px] grid w-full">{/* 项目 */}</div>

当容器足够宽以容纳比您拥有的更多项目时，这可能会创建空白空间。同样，您可以在这里尝试：

Tailwind Playground

希望您喜欢这个小助手。

就这些了！ 非常感谢您的阅读。