如何使用HTML Grid布局实现跨多行的统一列宽调整功能

问题根因 #

你当前遇到的问题是resize属性仅作用于绑定的单个元素，不会修改Grid布局的列轨道宽度，因此同列其他元素无法同步调整宽度。两种实现方案如下：

方案1：直接修改原Grid布局（无需嵌套） #

核心逻辑是将第一列的宽度规则改为自适应子元素宽度，仅保留一个可调整元素作为列宽的控制源，实现整列同步缩放，不需要修改HTML结构，改动量最小。
需要修改的CSS部分：

.container {
    display: grid;
    /* 第一列宽度最小200px，随内部元素宽度自适应，第二列占剩余空间 */
    grid-template-columns: minmax(200px, auto) 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "logo search"
        "nav main"
        "log main";
}

.nav {
    grid-area: nav;
    overflow: auto;
    resize: horizontal;
    /* 限制调整范围，避免布局错乱 */
    min-width: 200px;
    max-width: 600px;
}

/* 移除log的resize属性，避免多个调整源冲突 */
.log {
    grid-area: log;
    overflow: auto;
}

如果需要把调整手柄放在底部，也可以将resize属性绑定到log元素，移除nav的resize属性即可。

方案2：嵌套Grid布局（更易维护） #

如果后续布局还有扩展需求，更推荐用嵌套结构，将同列元素封装到同一个父容器中，直接调整父容器宽度即可实现整列联动，结构更清晰，后续维护成本更低。

修改后的完整代码： #

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            display: grid;
            grid-template-columns: minmax(200px, auto) 1fr;
            height: 100%;
            margin: 0;
        }
        /* 左侧整列容器，作为resize的触发源 */
        .left-panel {
            resize: horizontal;
            overflow: auto;
            display: grid;
            grid-template-rows: 1fr 1fr 1fr;
            min-width: 200px;
            max-width: 600px;
        }
        /* 右侧容器 */
        .right-panel {
            display: grid;
            grid-template-rows: 1fr 2fr;
        }
        .main {
            grid-row: 2 / 3;
        }

        /* 演示用样式，可保留 */
        .container * {
            border: 1px solid red;
            position: relative;
        }
        .container *:after {
            content: attr(class);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: grid;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left-panel">
            <div class="logo"></div>
            <div class="nav"></div>
            <div class="log"></div>
        </div>
        <div class="right-panel">
            <div class="search"></div>
            <div class="main"></div>
        </div>
    </div>
</body>
</html>

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