CSS实现等高列布局及移动端堆叠适配求助

利用CSS Grid的天然等高特性就能实现需求，不需要给任何列手动设置height或min-height，同时通过媒体查询快速适配移动端堆叠布局，具体修改如下：

关键修改点 #

• 给.row添加grid-template-columns: repeat(3, 1fr)：让三列平分父容器宽度，Grid会自动让同一行的所有列高度保持一致，匹配最高列的高度
• 修正移动端媒体查询：将.row的列规则改为grid-template-columns: 1fr，强制单列布局，列自动上下堆叠
• 优化图片响应性：给图片添加max-width: 100%，避免移动端图片溢出容器

修改后的完整代码 #

CSS代码 #

.border-thinlight {
  border: 0.5rem solid #ffffff;
}

.bg-rboffwhite {
  background-color: #f4f4f4;
}

.row {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列平分宽度，自动等高 */
  gap: 3%;
}

.col {
  border: none;
}

/* 移动端适配：单列堆叠 */
@media screen and (max-width: 600px) {
  .row {
    grid-template-columns: 1fr; /* 切换为单列 */
    width: 100%;
  }
  .col img {
    max-width: 100%; /* 图片自适应容器宽度 */
    height: auto; /* 保持图片比例 */
  }
}

HTML代码 #

<div class="page" style="font-family: 'lato',helvetica;">
  <div class="row border-thinlight">
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
  </div>
  <br /><br />
  <div class="row border-thinlight">
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.<br /><br />
      <center>
        <img src="https://image.petmd.com/files/styles/863x625/public/2022-10/Dachshund.jpeg" width="400px" height="250px" /></center>
    </div>
    <div class="col bg-rboffwhite" style="padding: 1vw;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</div>
  </div>
</div>

原理说明 #

CSS Grid布局中，同一网格轨道（行）内的所有网格项（列）默认会继承轨道的高度，也就是自动匹配该行中最高元素的高度，完全不需要手动设置高度属性，天然满足等高列需求。移动端通过修改grid-template-columns为单列，Grid会自动将列按顺序堆叠，实现响应式布局。

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