蛇形布局列行等高问题：如何实现容器高度自适应

需求：制作标签/值的蛇形布局列，要求同一行的左右列高度完全相等——当左侧内容为多行时，右侧列高度自动匹配；同时外层容器高度需自适应内容，而非固定高度。

原代码问题 #

原代码通过嵌套Flex布局实现，但左右两个.row是独立的Flex容器，各自高度自适应内部内容，导致同一行的左右列高度无法匹配，且必须给外层容器设置固定高度才能勉强对齐。

修改后的解决方案 #

通过CSS Grid布局可以更简洁地实现需求，无需固定容器高度，同时保证同一行的列等高：

HTML 结构（简化.row容器）

<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蛇形等高列布局</title>
    <style>     
        .container {
            display: grid;
            /* 两列，每列最小宽度14rem，剩余空间等分 */
            grid-template-columns: repeat(2, minmax(14rem, 1fr));
            /* 关键：每行高度由该行最高内容决定，同一行单元格高度统一 */
            grid-auto-rows: 1fr;
            gap: 0; /* 可根据需求调整列间距 */
        }

        .column {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="column">1) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque labore fuga iste, ut nam quod voluptates vel! Ex est obcaecati itaque architecto totam, sapiente aliquam veniam repudiandae assumenda. Provident, nostrum? Officiis expedita, repudiandae dignissimos veniam sit architecto voluptate nam est earum? Fugiat natus exercitationem hic at, iusto dolore soluta distinctio illo voluptates ratione? Distinctio, veniam deserunt libero aspernatur optio obcaecati. Unde est doloribus iste aut quod perspiciatis, fugit necessitatibus magni animi excepturi eaque dolor sequi, ipsa rem ipsam maiores facilis dignissimos nam. Voluptate cum quo eius. Impedit quisquam optio vero! Voluptatem magni, nisi quo consequuntur itaque totam quia voluptate repellendus alias? Laboriosam possimus unde debitis facere numquam asperiores dolor aliquam amet nam, totam quaerat voluptate modi libero maiores, similique magni. Ipsam cupiditate autem est aliquam, magnam quasi perspiciatis minus consequatur alias dolor quibusdam, distinctio, adipisci facere impedit minima necessitatibus. Reiciendis ducimus corrupti, ab quis mollitia aspernatur cum dignissimos deleniti incidunt.</div>
        <div class="column">3) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Repudiandae vel aspernatur sequi facilis earum assumenda dolorem molestiae sunt, numquam autem. Maiores ullam odit quae velit ex? Iusto enim dicta voluptates. Alias excepturi vero voluptatibus, saepe error iusto laudantium illo nemo veritatis iure quidem. Maxime cum eveniet nihil voluptas odio obcaecati, accusamus voluptate sed autem? Illo adipisci dignissimos esse reprehenderit labore.</div>
        <div class="column">2) Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel debitis voluptas fugiat vero dolorum consequuntur ullam magnam perspiciatis, veniam culpa, quos ex voluptatem. Vitae officiis eius illo doloremque natus quas. Quis neque id repudiandae ut sunt! Voluptate eligendi odio placeat enim quod laudantium! Dolorem velit sapiente dolorum vero? Iusto ad nam commodi voluptatem? Distinctio quas voluptate alias quo consectetur laboriosam. Nam beatae suscipit architecto quaerat id esse sit, aliquid consectetur enim expedita. Rem obcaecati ducimus cupiditate expedita illo perspiciatis, itaque ipsam ipsa placeat delectus excepturi corrupti dicta non voluptas ex. Ea sint dignissimos itaque ducimus adipisci nemo debitis totam culpa laudantium. Molestias ipsum eaque temporibus odio excepturi, libero ipsam vero sequi voluptate quis repudiandae quod corporis. Repellat commodi saepe omnis!</div>
        <div class="column">4) Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab ducimus blanditiis similique saepe necessitatibus placeat, expedita ratione quisquam consequatur a dicta exercitationem molestias, neque, error totam reiciendis veritatis vitae nihil!</div>
    </div>
</body>
</html>

核心原理

• grid-template-columns: repeat(2, minmax(14rem, 1fr))：定义两列布局，每列最小宽度14rem，超出空间自动等分，保证响应式。
• grid-auto-rows: 1fr：强制每行的高度由该行最高的单元格决定，同一行的两个单元格会自动继承这个高度，实现等高效果。
• 容器高度完全自适应内容，无需设置固定高度，满足需求。

效果说明 #

调整后，第一行的1号和3号列高度一致（取两者中较高的高度），第二行的2号和4号列高度一致；外层容器高度会自动根据两行的总高度调整，完全适配内容。

内容的提问来源于stack exchange，提问作者David Pell