Как использовать функцию attr() внутри repeat()?

Question

[imko]

Пытаюсь сделать грид, в котором количество колонок задавалось бы атрибутом у тэга:

<div class="text-cards" data-cols="3">
            <div class="text-card">
              <div class="img"><img src="" alt=""></div>
              <h4>Полное отсутствие зубов</h4>
              <p>Lorem ipsum dolor sit amet </p>
            </div>
          </div>

.text-cards {
	display: grid;
	gap: 40px;
	grid-template-columns: repeat(attr(data-cols number), 1fr);
}

Соответственно, ожидаю, что значение взятое из атрибута data-cols, в данном случае 3, будет подставлено в функцию repeat и на выходе я получу

grid-template-columns: 1fr 1fr 1fr);
Но на деле я получаю "недопустимое значение свойства" )
Возможно это заставить работать? Или сделать без особых костылей такое поведение другим образом?

Comments

[Сергей delphinpro]

attr() для любых свойств не работает
Только для content

Answer 1

[andand44]

Через css переменные можно сделать

<div class="text-cards" style="--c:3">
  <div class="text-card">
    <div class="img"><img src="" alt=""></div>
    <h4>Полное отсутствие зубов</h4>
    <p>Lorem ipsum dolor sit amet </p>
  </div>
</div>

.text-cards {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(var(--c), 1fr);
}

https://jsfiddle.net/q9t8eyLc/1/

Comments

[Aetae]

Но выглядит некрасиво. Можно через препроцессоры нагенерить разумное количество [data-cols="N"] с простановкой той же переменной или напрямую grid-template-columns.)

[imko]

Aetae, тогда выглядит неоптимально) раздувать стили, хотя конечно и совсем немного

[andand44]

Использование переменных более оптимальное решение. Есть еще вариант тупо вставить правило в html style="grid-template-columns: repeat(3, 1fr);", но это на любителя.