css - 带有 div 的居中列附加到侧面

Question

对于如何处理这个问题，我有点进退两难。

我有N列，其中的容器位于屏幕中央。每列包含相同数量的行，我希望所有人都排队。

在它的左边，我想附加一个也包含行的列，我希望所有这些都与列的行对齐。如果其中一个单元格包含的数据多于其兄弟姐妹的相应单元格中的数据，我希望整行展开，以便所有单元格按高度对齐。

这里的关键是N个列是居中的。

* {
    box-sizing: border-box;
}



.column-container {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
}

.column {
    width: 200px;
}

.header-box {
    background-color: #b3e9ff;
    padding: 20px;
}

.box {
    background-color: #ffb700;
    padding: 8px;
    border-top: 1px solid #797979;
}


h2 {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
}

<div class="column-container">
            <div class="column">
                <div class="header-box">
                    <h2>COLUMN #1</h2>
                </div>

                <div class="box">
                    <h2>CONTENT #1</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #2</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #3</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #4</h2>
                </div>
            </div>

            <div class="column">
                <div class="header-box">
                    <h2>COLUMN #2</h2>
                </div>

                <div class="box">
                    <h2>CONTENT #1</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #2</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #3</h2>
                </div>
                <div class="box">
                    <h2>CONTENT #4</h2>
                </div>
            </div>
        </div>

标签： cssflexboxcss-grid