如何实现响应式等高度不等宽的两列信息流布局（小屏自动堆叠）？

嘿，我来帮你捋清楚这个问题！你想要的这种「大屏左图右文等高度、小屏自动上下堆叠」的信息流布局，用CSS Grid或者Flex都能搞定，而且你现在已经在用Grid了，其实只要调整几处代码就能实现响应式，完全不用换方案~ 我先给你把现有代码改好，再给你说清楚思路，顺便对比下Grid和Flex的优劣。

先解答你的核心疑问：Grid还是Flex？ #

其实两者都能实现需求，但对于这种「一列固定宽度、另一列占满剩余空间」的布局，Grid的列定义会更直观，而且Grid天然支持行内元素等高，不用像Flex那样额外处理对齐细节（当然Flex也能做到，但Grid写起来更直接）。你之前的问题出在没给Grid加响应式的媒体查询，以及图片的尺寸控制没到位，不是Grid本身不好用~

修正你的Grid代码（一步到位实现需求） #

我把你的CSS代码调整了一下，每处修改都加了注释，你可以直接用：

/* 信息流容器：大屏下固定图列300px，文本列占剩余空间 */
.story {
  width: 100%;
  display: grid;
  /* 关键：固定300px的图列 + 占满剩余的文本列 */
  grid-template-columns: 300px 1fr;
  /* Grid默认行高就是等高的，不用额外设置grid-auto-rows:1fr */
  padding: 10px 20px 0 20px;
  z-index: 5;
  /* 可选：加列间距让图和文本之间有空隙 */
  gap: 10px;
}

/* 图片容器：确保占满Grid列的空间 */
.story-img {
  border: 1px solid green;
  height: 100%;
}

/* 图片：填满300px宽的容器，高度和文本列一致且不变形 */
.story-img img {
  width: 100%;
  height: 100%;
  /* 超出容器时自动裁剪，保留图片比例 */
  object-fit: cover;
}

/* 文本容器：Grid会自动让它和图片容器等高 */
.story-squib {
  background-color: #eae9e1;
  overflow: hidden;
  border: 1px solid black;
  /* 加内边距让文本不贴边 */
  padding: 0 20px;
}

.story-head {
  font-family: 'Montserrat';
  color: #4a5831;
  font-weight: bold;
  font-size: 2rem;
  margin: 20px 0;
}

.story-body, .story-date {
  font-family: 'Montserrat';
  color: #96968a;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 10px 0;
}

/* 响应式媒体查询：小屏下自动堆叠成单列 */
@media (max-width: 768px) {
  .story {
    /* 把Grid列改成1列，自然堆叠 */
    grid-template-columns: 1fr;
  }
  /* 小屏下可以固定图片高度，符合你要的100px要求 */
  .story-img img {
    height: 100px;
  }
}

关键修改说明：

1. 列定义调整：把grid-template-columns: 1fr 6fr改成300px 1fr，直接实现「固定宽度图列+自适应文本列」的效果，比比例式分配更精准。
2. 图片尺寸控制：给图片加width:100%; height:100%; object-fit:cover，确保图片填满300px宽的容器，同时高度和文本列完全对齐，不会变形或留白。
3. 响应式堆叠：通过媒体查询在小屏时将Grid列改为1列，自动实现上下堆叠，还能单独调整小屏下的图片高度。

备选方案：用Flex实现的写法 #

如果你更习惯Flex布局，也能轻松实现需求，代码逻辑更偏向一维布局，也很简洁：

.story {
  width: 100%;
  display: flex;
  /* 小屏下自动换行 */
  flex-wrap: wrap;
  padding: 10px 20px 0 20px;
  gap: 10px;
  z-index: 5;
}

.story-img {
  /* 固定300px宽，不收缩不放大 */
  flex: 0 0 300px;
  border: 1px solid green;
}

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

.story-squib {
  /* 占满剩余空间 */
  flex: 1;
  background-color: #eae9e1;
  overflow: hidden;
  border: 1px solid black;
  padding: 0 20px;
  /* Flex默认align-items:stretch，自动和图片列等高 */
}

/* 小屏堆叠逻辑 */
@media (max-width: 768px) {
  .story-img {
    /* 小屏下占满宽度 */
    flex: 0 0 100%;
  }
  .story-img img {
    height: 100px;
  }
}

最后总结一下 #

• 如果你已经在用Grid，直接调整现有代码加媒体查询就行，Grid的二维布局控制更直观，适合这种行列明确的信息流；
• Flex更偏向一维布局，代码简洁，适合习惯Flex的开发者；
• 两种方案都能完美实现你要的「大屏等高度两列、小屏自动堆叠」的效果，选你顺手的就好~

内容来源于stack exchange