Как можно реализовать таблицу с дальнейшим добавлением в нее блоков и адаптацией?

Question

[Djents]

через бордер и чилды не получается, при адаптации всё ломается и приходится адаптировать заново, очень много кода выходит, есть ли вариант сделать это попроще? Чтобы сетка не ломалась при четном/нечетном количестве айтемов при адаптиве. Айтемы через флексы сверстаны

Comments

[Ankhena]

Варианты:

1. Задаете черные верхнюю и левую границу родителю.
Отрицательным margin загоняете дочерние под черную границу.

2. Закрываете верхнюю и правую лишние границы дочерних псевдоэлементами родителя.

3. Используете nth-child в зависимости от количества блоков в media и не рисуете верхние границы первому ряду и левые первому столбцу.

Ещё как-нибудь

[Djents]

Ankhena, кол-во может меняться

[Ankhena]

Djents, и что с того?

На первые два варианта это вообще никак не влияет.

Вот вам ещё для полноты картины для 3 варианта (или его симметричного варианта с другой парой границ) https://css-live.ru/articles/resheno-s-pomoshhyu-c...

[Djents]

Ankhena, Если можно, не могли бы Вы показать в кодепене, как это вообще будет происходить? Ссылку приложил

[Ankhena]

Djents, ну уж первыми двумя вариантами-то вы можете самостоятельно?

Для 3 - у вас блоки фикс ширины, значит известно сколько их помещается при какой ширине вьюпорта. Да, будет удобнее, когда наконец появятся media от контейнера.

На codepen не вижу ни одной из попыток.

Answer 1

[Глюкъ Виртуален]

Кажется здесь только флексом... Замените таблицу на флексбоксы, заодно и мобильную верстку победите.

Comments

[Ankhena]

Там и так флексы..
Только к вопросу не имеют отношения ;)
Хотя гридами это делать удобнее.