我想做同样的事情，从12帧的网格开始，然后下降到8fr，最后以4fr结束。

grid-template-columns: repeat(4, 1fr);

字符串
然后，使用一个媒体查询，我意识到除了使网格变小之外，我还应该使图层的大小变大，其中要跨越的帧数的限制将是网格的大小。例如，让我们想象一下这个基本网格：

.layout.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 16px 24px;
    gap: 16px 24px;

   .frame, .row {
    display: grid;
    place-items: center;
    grid-column: auto;
  }

  .span-1 {
    grid-column: auto / span 1;
  }

  .span-2 {
    grid-column: auto / span 2;
  }

  .span-3 {
    grid-column: auto / span 3;
  }

  .span-4 {
    grid-column: auto / span 4;
  }

  .span-5 {
    grid-column: auto / span 5;
  }

  .span-6 {
    grid-column: auto / span 6;
  }

  .span-7 {
    grid-column: auto / span 7;
  }

  .span-8 {
    grid-column: auto / span 8;
  }

  .span-9 {
    grid-column: auto / span 9;
  }

  .span-10 {
    grid-column: auto / span 10;
  }

  .span-11 {
    grid-column: auto / span 11;
  }

  .span-12, .row {
    grid-column: auto / span 12;
  }
}

型
它看起来是这样的

的数据
但是在媒体查询中，假设screen and (max-width: 1278px)有一个代码，如

.layout.grid {
    grid-template-columns: repeat(4, 1fr) auto;

    [class^="span-"], .row {
      grid-column: auto / span 4;
    }

    .span-1 {
      grid-column: auto / span 1;
    }

    .span-2 {
      grid-column: auto / span 2;
    }

    .span-3 {
      grid-column: auto / span 2;
    }
}

型
结果如下所示：

框架的大小被限定为1fr，你必须知道框架的顺序。你可以从这一点开始构建一个更成熟的解决方案。但我认为你已经明白了。

你试过这个吗：

grid-template-columns: repeat(auto-fill, min-content);

字符串
或

grid-template-columns: repeat(auto-fill, max-content);

型
不知道这是否是你想要的结果，但这是我对它的理解。两者都有类似的结果，2行内的项目。