Tengo esto

<a href="/u/mixingrid" data-community-mention="USER" data-community-mention-slug="mixingrid">@mixingrid</a> ($number, $columns, $gap) {
    display: grid;
    grid-template-columns: repeat($number, $columns);
    gap: $gap;
}

Es bastante básico pero me sirve para lo que quiero.

El problema que tengo es la cantidad de columnas.

Me queda algo como esto

<a href="/u/includegrid" data-community-mention="USER" data-community-mention-slug="includegrid">@includegrid</a> (2 , 1fr , 20px)

Dos columnas de 1fr con un gap de 20px.

¿Pero que tal si quiero más columnas de diferentes tamaños?. He intentado algunas cosas pero no me salen bien.

Tengo esto

<a href="/u/mixingrid" data-community-mention="USER" data-community-mention-slug="mixingrid">@mixingrid</a> ($number, $columns, $gap) {
    display: grid;
    grid-template-columns: repeat($number, $columns);
    gap: $gap;
}

Es bastante básico pero me sirve para lo que quiero.

El problema que tengo es la cantidad de columnas.

Me queda algo como esto

<a href="/u/includegrid" data-community-mention="USER" data-community-mention-slug="includegrid">@includegrid</a> (2 , 1fr , 20px)

Dos columnas de 1fr con un gap de 20px.

¿Pero que tal si quiero más columnas de diferentes tamaños?. He intentado algunas cosas pero no me salen bien.

Tengo esto

<a href="/u/mixingrid" data-community-mention="USER" data-community-mention-slug="mixingrid">@mixingrid</a> ($number, $columns, $gap) {
    display: grid;
    grid-template-columns: repeat($number, $columns);
    gap: $gap;
}

Es bastante básico pero me sirve para lo que quiero.

El problema que tengo es la cantidad de columnas.

Me queda algo como esto

<a href="/u/includegrid" data-community-mention="USER" data-community-mention-slug="includegrid">@includegrid</a> (2 , 1fr , 20px)

Dos columnas de 1fr con un gap de 20px.

¿Pero que tal si quiero más columnas de diferentes tamaños?. He intentado algunas cosas pero no me salen bien.