если в результате не найду решения, остановлюсь на правом варианте — при малом количестве блоков он ведёт себя адекватно, нужно только следить за этим количеством при рендеринге
tabsItem[i].style.display = 'block';
tabsItem[i].classList.add('modals-active');весь код с html и css скинуть не получается, слишком много символов.
Имеет ли оно неочевидные минусы/проблемы с доступностью, по сравнению с обычным способом, когда скрывают input и стилизируют label?
потому что в них встречаются не только пары, а целые блоки картинок разных пропорций
--aW1: 4;
--aH1: 3;
--aW2: 3;
--aH2: 4;я думал что родителем может быть любой див, которому присваивается display: flex, а оказывается только тот, кому присваивается первому.
<form>
<label for="">label</label>
<select name="" id=""></select>
<label for="">label</label>
<select name="" id=""></select>
</form>form {
display: grid;
grid-template-columns: min-content 1fr;
gap: 1em;
}grid-column: 1/-1;
Пробовал указать для cards inline-flex, все равно занимает столько же блочного места.
grid-template-columns: repeat(3, 1fr). Либо вариации с min-content или min-max.
@media. Вот и пишите разные стили для разных вьюпортов.