如何实现两个CSS Grid的间隙垂直对齐？grid-template-columns配置问题

问题背景 #

用CSS Grid实现了两个区块：

• 第一个区块通过repeat(4, 1fr)实现每行4个盒子
• 第二个区块设置首个元素宽度为50%，剩余两个元素用1fr，每行3个盒子

需要让第二个区块的间隙与第一个区块的间隙垂直对齐，尝试用2fr替代50%未解决问题。

原始代码 #

<style>
#grid1 .container, #grid2 .container {
    display: grid;
    gap: 12px;
    grid-auto-flow: column;
    margin-bottom: 20px;
}
#grid1 .container div, #grid2 .container div {
    border: 1px solid #c00;
    background-color: #ca3c46;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}
#grid1 .container {
    grid-template-columns: repeat(4, 1fr);
}
#grid2 .container {
    grid-template-columns: 50% 1fr 1fr;
}
</style>

<div id="grid1">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
        <div>Box 4</div>
    </div>
</div>

<div id="grid2">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</div>

解决方法 #

核心思路是让第二个网格的列宽基于第一个网格的列宽单位计算，保证间隙位置完全对齐。通过CSS变量统一管理间隙值，再用calc精确计算列宽：

<style>
:root {
  --grid-gap: 12px; /* 统一间隙变量 */
}

#grid1 .container, #grid2 .container {
    display: grid;
    gap: var(--grid-gap);
    grid-auto-flow: column;
    margin-bottom: 20px;
}
#grid1 .container div, #grid2 .container div {
    border: 1px solid #c00;
    background-color: #ca3c46;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 20px;
}
#grid1 .container {
    grid-template-columns: repeat(4, 1fr);
}
#grid2 .container {
    /* 第一个元素宽度 = 第一个网格中2列 + 1个间隙的总宽度 */
    grid-template-columns: calc((100% - 3*var(--grid-gap))/2 + var(--grid-gap)) repeat(2, calc((100% - 3*var(--grid-gap))/4));
}
</style>

<div id="grid1">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
        <div>Box 4</div>
    </div>
</div>

<div id="grid2">
    <div class="container">
        <div>Box 1</div>
        <div>Box 2</div>
        <div>Box 3</div>
    </div>
</div>

原理说明 #

• 第一个网格总宽度 = 4列宽 + 3个间隙，因此单列宽度为 (容器宽度 - 3*间隙)/4
• 第二个网格的首个元素需要对齐到第一个网格的第二个间隙位置，宽度应为2个列宽 + 1个间隙，计算后就是 calc((100% - 3*var(--grid-gap))/2 + var(--grid-gap))
• 剩余两个元素宽度与第一个网格的单列一致，确保右侧间隙完全垂直对齐

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