自动适合网格显示中的列，并具有最大列数

Question

是否可以定义display: grid布局，以便一列将占用尽可能多的空间（ala：auto-fit）但是在行数达到最大时将行换行达到了列数，而没有单独设置列样式？

从概念上讲，我是这样看的：

grid-template-columns: repeat(minmax(auto-fit, 12), minmax(0, 1fr));

但是，在我所有的努力中，似乎我得到了 auto-fit 或多列。我不能将两者结合在一起。

在 flex 中，可以通过以下方式实现，最大数量为每行4列：

.row {
  box-sizing: border-box;
  display: flex;
  flex-grow: 1;
  flex-wrap: wrap;
  margin: 0 -12px;
 }
 
 .row > div {
  box-sizing: border-box;
  display: flex;
  flex: 1;
  max-width: 100%;
  min-height: 1px;
  min-width: calc(100%/4);
  padding: 0 12px;
  width: 100%;
}
  
.row p {
  align-items: center;
  background-color: rgba(147, 128, 108, 0.1);
  border-radius: 3px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  margin: 12px 0 0 0;
  min-height: 36px;
  width: 100%;
}

<div class="row">
  <div><p>1 of 7</p></div>
  <div><p>2 of 7</p></div>
  <div><p>3 of 7</p></div>
  <div><p>4 of 7</p></div>
  <div><p>5 of 7</p></div>
  <div><p>6 of 7</p></div>
  <div><p>7 of 7</p></div>
</div>