使用CSS Grid重现flex的“行换行”

Question

我正在尝试创建一个具有固定数量的单元格的行，该行具有以下属性：

• 单元格应仅是其内容的大小，不能多于，不小于；
• 该行应仅是其单元格的大小（+间隙），在任何情况下都不得拉伸或收缩）；
• 该行仅应在周围布局的强制下才断行，以防止溢出，就像flex-wrap: row wrap;
• 只要没有溢出，该行就应“强制”其大小在周围的布局上（因此，如果该行是flex-grow: 1 div的兄弟，则该行不应中断其行）；
• 如果可能的话，所有这些都无需为单元格设置任何样式，也无需进行媒体查询；

我可以使用flex和row wrap来做到这一点，但我想知道是否可以使用display: grid。

这是我尝试过的：

.grid {
  display: grid;
  gap: 18px 18px;
  grid-template-columns: repeat(auto-fit, minmax(0, auto));
  border: 1px solid red;
}

.grid > * {
  border: 1px solid blue;
}

<div class='grid'>
  <div>aaa</div>
  <div>aaaaa</div>
  <div>aa</div>
  <div>aaaa</div>
</div>

这占用了太多空间。使用auto-fill会使它缩小太多。我该怎么办？