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

254
29 июня 2017, 02:47

Добрый день. Есть разметка вида:

<div class='container'>
    <div class='column'>
        <div class='item'>1</div>
        <div class='item'>2</div>
        <div class='item'>3</div>
    </div>
    <div class='column'>
        <div class='item'>4</div>
        <div class='item'>5</div>
        <div class='item'>6</div>
    </div>
    <div class='column'>
        <div class='item'>7</div>
        <div class='item'>8</div>
        <div class='item'>9</div>
    </div>
</div>

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

1  4  7
2  5  8
3  6  9

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

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

Answer 1

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

READ ALSO
Когда правильнее делать дамп MySQL?

Когда правильнее делать дамп MySQL?

Есть курсовая работаТема курсовой работы "Автоматизированная система ЗАГС"

268
Single Sign-On для двух CMS на одном домене

Single Sign-On для двух CMS на одном домене

Уважаемые знатокиСитуация такая: Есть один домен вида site

279