Имитация таблицы CSS

#html #css #css3 #flexbox #css_grid

Есть разметка вида:


    

        
1
        
2
        
3
    
    

        
4
        
5
        
6
    
    

        
7
        
8
        
9
    



Такую последовательность блоков .item важно сохранить, потому что они должны выделяться
друг за другом. Блоки .column необязательны.
Необходимо визуально представить это все в виде таблички:

1  4  7
2  5  8
3  6  9


Проблема в том, что ячейки в одном ряду должны быть одинаковой высоты, но их размеры
заранее неизвестны. То есть 1 и 7 могут быть маленькими, а 4 высокой, но следующий
ряд должен начинаться ровно под 4.
Как установить связь между этими элементами, чтобы они подстраивались друг под друга? 
Flex, grid — все что угодно подойдет, лишь бы в хроме работало, только тыкните, пожалуйста,
куда именно нужно смотреть, всю голову сломала.
Спасибо!

АПД: количество блоков .item внутри каждой колонки может быть любым, заранее неизвестно,
сколько их, но, разумеется, в каждой колонке одинаково
    

Ответы

Ответ 1

В общем, насколько я понимаю, на данный момент мою задачу нельзя решить во всех аспектах,
если неизвестно финальное количество строк.
Максимально минимальным решением я считаю динамическую установку свойства grid-template-rows
для контейнера. При этом блоки .column не используются, все элементы .item расположены
на одном уровне.
При этом сохраняется необходимая последовательность выделения, а благодаря сетке
grid можно управлять всем контейнером как таблицей.