html – CSS table simulation

Question:

There is a markup like this:

<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>

It's important to keep this sequence of .item blocks because they need to stand out one after the other. The .column blocks are optional. It is necessary to visually represent all this in the form of a plate:

1  4  7
2  5  8
3  6  9

The problem is that the cells in the same row must be the same height, but their sizes are not known in advance. That is, 1 and 7 can be small, and 4 high, but the next row should start exactly under 4. How to establish a connection between these elements so that they fit together? Flex, grid – anything will do, as long as it works in chrome, just poke, please, where exactly you need to look, I broke my whole head. Thanks!

ADF: the number of .item blocks inside each column can be any, it is not known in advance how many there are, but, of course, in each column the same

Answer:

In general, as far as I understand, at the moment my task cannot be solved in all aspects if the final number of lines is unknown. The minimal solution I think is to dynamically set the grid-template-rows property for the container. In this case, .column blocks are not used, all .item elements are located on the same level. At the same time, the necessary selection sequence is preserved, and thanks to the grid grid , you can manage the entire container as a table.