@imko

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

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

<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);
Но на деле я получаю "недопустимое значение свойства" )
Возможно это заставить работать? Или сделать без особых костылей такое поведение другим образом?
  • Вопрос задан
  • 109 просмотров
Решения вопроса 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/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы