RAM（重复、自动、Minmax）

在这第七个示例中，请结合使用您已学到的一些概念来创建包含自动放置的灵活子项的自适应布局。内容非常简洁。这里要记住的关键术语是 repeat、auto-(fit|fill) 和 minmax()，它们是 RAM 的首字母缩写。

总体如下所示：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

您再次使用 repeat()，但这次使用的是 auto-fit 关键字，而不是明确的数值。这样可以自动放置这些子元素。这些子项的基本最小值为 150px，最大值为 1fr，这意味着在较小的屏幕上，它们将占据整个 1fr 宽度，当每个子项的宽度达到 150px 时，它们将开始流入同一行。

使用 auto-fit 时，所有完全空的轨道都将合拢为 0，而填充的轨道将会扩展以占据它们的空间。不过，如果您将此值更改为 auto-fill，空轨道占用的空间与填充时相同：

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

HTML

<div class="parent white">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
  </div>
  

CSS

        .parent {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}