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

【问题标题】：Dynamic CSS grid small columns with one big column first动态 CSS 网格小列，先有一个大列
【发布时间】：2021-01-09 03:03:22
【问题描述】：

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

所以想法是第一个项目总是显示得比其他项目大，按照设计，它将有 3fr 宽度大小，其他项目将有 1fr 大小。

我尝试了以下方法：

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

但它不起作用。因此，由于我正在使用 Angular，因此我执行了以下操作：

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

所以我只是得到项目长度，减去 1，我的列按预期工作。

但我只想用 CSS 来实现这一点，我该怎么办？因为我只需要列，所以我也对 flexbox 解决方案或 SASS 持开放态度。我怎样才能在第一个之后拥有这个动态列？

【问题讨论】：

标签： css angular sass

【解决方案1】：

解决方案：

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

为什么有效？

grid-auto-columns 属性不会覆盖从属性grid-template-columns 定义的网格列。设置显式大小的网格元素后，CSS 网格将遵循 grid-auto-columns 定义的隐式模式。

【讨论】：