angular - Dynamic CSS grid small columns with one big column first

Question

I'll be receiving a certain amount of items to display in a grid, the minimum amount is 2 but we don't know the max numbers of items it can be retrieved. Each item is a column.

So the idea is that the first item is always displayed bigger than the others, following the design it'll have a 3fr width size and the others will have a 1fr size.

I tried the following:

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

But it doesn't work. So since i'm working with Angular, i did the following:

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

So i just get the items length, subtract 1 and i have my columns working as expected.

But i want to achieve this with CSS only, so what can i do? Since i just need the columns i'm open to a flexbox solution too, or SASS. How can i have this dynamic columns after the first one?

Answer 1

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

Why it works?

grid-auto-columns property does not override the grid columns defined from the property grid-template-columns. After the explicitly sized grid elements are set, the CSS grid will follow the implicit schema that is defined by grid-auto-columns.