Grid布局中元素hover展开时其他元素未实时同步缩放问题咨询

问题描述 #

使用Grid布局创建了4个方块，期望hover单个方块展开时，其余方块实时自适应缩小，但目前其余方块需等展开动画完成后才调整尺寸，存在明显延迟。

延迟原因 #

你当前的实现是给hover的方块设置固定width:150px和height:150px，Grid容器采用固定宽高（200px），轨道用1fr分配空间。浏览器的布局计算逻辑会优先完成hover元素的尺寸过渡，再重新计算Grid轨道的剩余空间，导致其余方块的调整滞后。核心矛盾是子元素固定尺寸过渡与Grid轨道重排的时机不匹配。

解决方案 #

放弃子元素固定尺寸的思路，改为动态调整Grid轨道尺寸实现hover效果。通过Grid轨道的过渡动画，让整个布局的尺寸变化同步触发，确保所有方块实时响应。

实现思路 #

1. 移除子元素的width/height设置，依赖Grid轨道自动填充空间
2. 给Grid容器的grid-template-columns和grid-template-rows添加过渡效果
3. 利用CSS :has()选择器（现代浏览器支持），根据子元素的hover状态修改对应轨道尺寸，剩余轨道用1fr自动分配空间

完整代码示例 #

CSS #

main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    width: 200px;
    height: 200px;
    gap: 10px;
    /* 轨道尺寸变化添加过渡，保证同步动画 */
    transition: grid-template-columns 1s linear, grid-template-rows 1s linear;
}

.square {
    background-color: rebeccapurple;
    /* 去掉固定宽高，由Grid轨道控制尺寸 */
}

/* 第一行第一列方块hover时，调整对应轨道 */
main:has(.square:nth-child(1):hover) {
    grid-template-columns: 150px 1fr;
    grid-template-rows: 150px 1fr;
}

/* 第一行第二列方块hover时 */
main:has(.square:nth-child(2):hover) {
    grid-template-columns: 1fr 150px;
    grid-template-rows: 150px 1fr;
}

/* 第二行第一列方块hover时 */
main:has(.square:nth-child(3):hover) {
    grid-template-columns: 150px 1fr;
    grid-template-rows: 1fr 150px;
}

/* 第二行第二列方块hover时 */
main:has(.square:nth-child(4):hover) {
    grid-template-columns: 1fr 150px;
    grid-template-rows: 1fr 150px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

HTML #

<body>
  <main>
    <div class="square" id="one"></div>
    <div class="square" id="two"></div>
    <div class="square" id="three"></div>
    <div class="square" id="four"></div>
  </main>
</body>

兼容旧浏览器方案 #

如果需要兼容不支持:has()的浏览器（如旧版Firefox/Chrome），可以用JavaScript监听hover事件实现：

const main = document.querySelector('main');
const squares = document.querySelectorAll('.square');

// 重置Grid轨道的函数
const resetGrid = () => {
    main.style.gridTemplateColumns = '1fr 1fr';
    main.style.gridTemplateRows = '1fr 1fr';
};

// 为每个方块绑定hover事件
squares.forEach((square, index) => {
    square.addEventListener('mouseenter', () => {
        switch(index) {
            case 0:
                main.style.gridTemplateColumns = '150px 1fr';
                main.style.gridTemplateRows = '150px 1fr';
                break;
            case 1:
                main.style.gridTemplateColumns = '1fr 150px';
                main.style.gridTemplateRows = '150px 1fr';
                break;
            case 2:
                main.style.gridTemplateColumns = '150px 1fr';
                main.style.gridTemplateRows = '1fr 150px';
                break;
            case 3:
                main.style.gridTemplateColumns = '1fr 150px';
                main.style.gridTemplateRows = '1fr 150px';
                break;
        }
    });
    square.addEventListener('mouseleave', resetGrid);
});

效果说明 #

调整后，Grid轨道的尺寸过渡会同步带动所有方块的尺寸变化，hover展开动作与其余方块的缩小动作完全同步，不会出现延迟。

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