如何让CSS Grid中40%与60%占比的两列元素等高？

其实CSS Grid默认就会让同一网格行里的所有网格项高度一致——网格轨道的高度会自动适配行内最高的那个元素，不需要额外设置。但如果你的布局看起来还是有高度差，大概率是以下几个细节问题，对应解决办法如下：

1. 统一网格项的盒模型计算方式 #

如果你的文本容器或图片容器加了padding、border，可能会导致视觉上的高度差异。给所有网格项添加box-sizing: border-box;，让内边距和边框算进元素的总高度：

.grid-item {
  box-sizing: border-box;
}

2. 处理图片的高度适配 #

如果图片本身高度不足，会让第二列看起来比第一列矮。可以强制图片填充整个网格项的高度，同时保持比例：

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，裁剪超出部分，适合背景类图片 */
  /* 若需要完整显示图片，改用 object-fit: contain; 可能会留空白 */
}

3. 显式控制网格行高度（可选） #

如果默认的自动高度不符合需求，可以用grid-auto-rows强制所有行高度均等：

.grid-container {
  display: grid;
  grid-template-columns: 40% 60%;
  grid-auto-rows: 1fr; /* 所有行高度一致，适配内容高度 */
}

完整示例代码 #

.grid-container {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 20px; /* 可选，列之间的间距 */
}

.grid-item {
  box-sizing: border-box;
  padding: 15px;
  border: 1px solid #eee;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid-container">
  <div class="grid-item">
    <p>这里是第一列的文本内容，不管内容多少，都会和右边的图片列保持相同高度。</p>
    <p>可以添加更多文本测试高度适配效果...</p>
  </div>
  <div class="grid-item">
    <img src="your-image-url.jpg" alt="示例图片">
  </div>
</div>

总结：优先利用CSS Grid的默认等高特性，再根据实际情况调整容器样式和图片适配方式，就能轻松实现两列等高效果。

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