动态CSS网格小列先有一个大列

我将收到一定数量的项目显示在网格中，最小数量为2，但我们不知道它可以检索的最大项目数。每个项目都是一列

因此，我们的想法是，第一个项目总是比其他项目显示更大，根据设计，它将有一个3fr宽度大小，其他将有一个1fr大小

我尝试了以下方法：

section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 3fr repeat(auto-fill, 1fr);
}

<section
  *ngIf="destaques$ | async as destaques"
  [ngStyle]="{
    'grid-template-columns': '3fr repeat(' + (destaques.length - 1) + ', 1fr)'
  }"
>

但它不起作用。因此，由于我与Angular合作，我做了以下工作：

section {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: 3fr repeat(auto-fill, 1fr);
}

<section
  *ngIf="destaques$ | async as destaques"
  [ngStyle]="{
    'grid-template-columns': '3fr repeat(' + (destaques.length - 1) + ', 1fr)'
  }"
>

所以我只需要得到项目的长度，减去1，我就可以让我的列按预期工作

---

但是我只想用CSS实现这一点，那么我能做什么呢？因为我只需要这些列，所以我也对flexbox解决方案或SASS持开放态度。如何在第一个动态列之后创建此动态列？

解决方案：

section {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: 3fr;
}

它为什么有效？

---

“栅格自动列”属性不会替代从“栅格模板列”属性定义的栅格列。设置显式大小的网格元素后，CSS网格将遵循网格自动列定义的隐式模式。

解决方案：

section {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  grid-template-columns: 3fr;
}

它为什么有效？

“栅格自动列”属性不会替代从“栅格模板列”属性定义的栅格列。设置显式大小的网格元素后，CSS网格将遵循由网格自动列定义的隐式模式