Это две отдельные колонки
.parent { display: flex; flex-wrap: wrap; justify-content: center } .child { display: flex; flex: 0 0 50%; padding: 10px; } Где parent это вся таблица, clild это отдельные карточки
Согласен гриды хуйнч
Попробуйте column-count и column-gap. Только в верстке их располагать нужно будет 1, 3, 5 и тд. Если 2 не будет "перепрыгывать" на след. колонку, 9 можно задать нижний отступ.
через колонки решается, другое решение не нашел
Ну придумал на flex небольшой костыль. Если такие элементы как-то динамически не обстраиваются, ну то есть мы например всегда знаем, что именно первый элемент требует прижатия нижнего блока к себе. Тогда это 1 + 3 - можно им пользоваться. В других случаях я б наверное искал вариант на grid/в худшем случае как-то уже через js обрабатывать. https://replit.com/@Binatik/card-css?v=1
Наверное решение выше не подойдёт, но я вечером ещё покупаюсь.
Оффтоп, но дизайн не интуитивен и вообще вредит UX. Получается какой-то Рокк ебол мупю ович, только горизонтальный
делал такую штуку через grid area https://cssgrid-generator.netlify.app/
Скорее всего никак. Только если джаваскриптом перетосовать.. И то не факт что будет как хотелось бы потому что может быть что одна карточка будет сильно выше всех остальных и тогда надо будет думать что делать с остальными.
Обсуждают сегодня