网格布局中跨两列元素：如何维持子元素宽高比？

你靠固定的200px+200px+40px=440px来计算跨列元素的宽高比，这只在窗口宽度刚好让单列网格宽度等于200px时（也就是你提到的1015px）成立。但实际上，网格列宽是跟着容器宽度自适应缩放的：窗口宽度变化时，列宽会同步调整，再加上固定的40px间距，跨列元素的实际总宽度根本不是固定的440px，导致你预设的宽高比无法匹配其他元素的高度。

别用固定像素值，改用CSS变量结合网格的动态计算值，让跨列元素的宽高比始终和单列元素高度保持一致：

1. 定义核心变量：在网格容器里统一管理间距和列数，方便后续计算：

.grid {
  --gap: 40px;
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gap);
}

2. 计算动态列宽：用容器总宽度减去总间距，再除以列数，得到当前窗口下的单列宽度：

.grid {
  --col-width: calc((100% - (var(--cols) - 1)*var(--gap)) / var(--cols));
}

3. 设置跨列元素的宽高比：
   • 用aspect-ratio的情况：单列元素的宽高比是0.8（宽/高），所以高度为var(--col-width)/0.8。跨列元素的宽度是calc(2*var(--col-width) + var(--gap))，因此宽高比直接写成两者的比值：

     .grid-item.col-2 {
       grid-column: span 2;
       aspect-ratio: calc(2*var(--col-width) + var(--gap)) / calc(var(--col-width)/0.8);
     }
     

   • 用padding-bottom的情况：单列元素的padding-bottom是125%（因为1/0.8*100%，padding-bottom基于自身宽度计算）。跨列元素要和单列高度一致，padding-bottom需写成高度与自身宽度的百分比：

     .grid-item.col-2.padding {
       grid-column: span 2;
       padding-bottom: calc((var(--col-width)/0.8) / (2*var(--col-width) + var(--gap)) * 100%);
     }
     

这样不管窗口怎么变，跨列元素的高度都会和单列元素对齐——因为它的宽高比是基于当前动态列宽实时计算的，而非依赖某个特定宽度下的固定值。

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