Как правильно сверстать такие блоки?

Question

[WarriorKodeK]

Всем привет. Надо сверстать данный блок


Он также может быть и таким
(Размер серого блока равно 2 ячейкам)

1

Или таким
(Размер серого блока по средине равно 1 ячейке, а в конце равно двум)

2

То есть проблема у меня именно вот с теми серыми блоками, что разделяют.


Серые блоки могут быть где угодно, необязательно посередине

Вот я накидал примерчик -https://codesandbox.io/s/53q629l2pp ( возможно я неправильно выбрал структуру блоков )

P.S Для данных я просто создал мок массив

Помогите пожалуйста)

Answer 1

[Владимир Проскурин]

Почему не использовать таблицы? colspan для td позволяет объединять ячейки, а rowspan - строки. т.е. вместо двух колонок, для отображения одной большой (на две колонки), пишите
<td colspan="2">Я широкая колонка!</td>

Comments

[WarriorKodeK]

А можете пожалуйста навчальную структуру накидать?
Давно не верстал таблицами

[Владимир Проскурин]

WarriorKodeK, https://divtable.com/generator/ вмержить ячейки можно в меню таблицы - cells -> merge cells