响应式嵌套网格布局

Question

在下面的代码中，我在外部网格布局中有4个内部网格。两个网格都响应。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
  border: 2px red solid;
}

.grid > * > * {
  border: 2px blue dashed;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
  grid-auto-rows: auto;
}

.grid > * > * > * {
  border: 1px green dashed;
}

<div class="grid">
  <div>
    <div>
      <div>1</div>
      <div>1</div>
    </div>
  </div>
  <div>
    <div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
      <div>2</div>
    </div>
  </div>
  <div>
    <div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
      <div>3</div>
    </div>  
  </div>
  <div>
    <div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
      <div>4</div>
    </div>
  </div>
</div>

相应的小提琴：https://jsfiddle.net/yg05zkx9/5/

由于我对内部网格使用了自动填充功能，因此第一个网格会出现空白轨道的空间，其中的元素由于缺少div而无法到达最后一个轨道。

是否有一种方法可以将空的空间从空的轨道重新分配到所有内部网格？

Answer 1

只需更改此CSS，就可以用最好的方式完成操作... 来自

.grid > * > *{
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr));
}

到

.grid > * > *{
  grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-gap: 10px;
  border: 2px red solid;
}

.grid > * > * {
  border: 2px blue dashed;
  display: grid;
  grid-auto-rows: auto;
}

.grid > * > * > * {
  border: 1px green dashed;
}

.grid > * > * {
  grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
}

<div class="grid">
      <div>
        <div>
          <div>1</div>
          <div>1</div>
        </div>
      </div>
      <div>
        <div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
          <div>2</div>
        </div>
      </div>
      <div>
        <div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
          <div>3</div>
        </div>  
      </div>
      <div>
        <div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
          <div>4</div>
        </div>
      </div>
    </div>