如何在CSS Grid中实现图文居中并解决响应式下网格塌陷问题

问题根本原因 #

你遇到的网格塌陷问题核心是几个错误配置导致的：

• 给.welcome-container设置了固定的50vh高度+50vw宽度，当视口缩小时，容器尺寸会小于内部文字、图片加内边距的最小所需尺寸，内容溢出就会触发塌陷
• 没有给背景图设置适配属性，小屏下图片显示异常也会干扰网格布局
• 额外小问题：HTML标签嵌套错误，<h2>里的<span>结束标签放在了</h2>外面，也可能导致部分浏览器渲染异常

优化方案（无需大量媒体查询） #

直接修改代码即可解决问题，核心用Grid自带的响应式语法实现自适应，完全不用额外写大量媒体查询：

修改后的CSS代码 #

.welcome {
  padding: 4em 5vw;
  display: flex;
  justify-content: center;
}

.welcome-container {
  display: grid;
  /* 核心响应式写法：最小列宽320px可自定义，宽度不够时自动切单列 */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  width: 100%;
  max-width: 1100px; /* 可根据需求调整最大宽度 */
  background-color: white;
  overflow: hidden;
  border-radius: 8px; /* 可选，匹配参考示例的圆角效果 */
  box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* 可选，匹配参考示例的阴影效果 */
}

.welcome-left {
  padding: 0; /* 去掉内边距让图片占满整个左侧块 */
  border: 1px blue solid;
  min-height: 350px; /* 保证图片块最小高度，避免小屏下被压缩得太扁 */
}

.welcome-img {
  background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
  width: 100%;
  height: 100%;
  background-size: cover; /* 图片覆盖整个容器不变形 */
  background-position: center; /* 图片居中显示 */
  background-repeat: no-repeat;
}

.welcome-right {
  border: 1px red solid;
  padding: 3em 2em;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 文字垂直居中 */
}

.welcome-title {
  text-align: center;
  color: #3f3f3f;
  font-weight: 400;
  margin: 0 0 1em 0;
}

修改后的HTML代码 #

<section class="welcome">
  <div class="welcome-container">
    <div class="welcome-left">
      <div class="welcome-img"></div>
    </div>
    <div class="welcome-right">
      <h2 class="welcome-title"><span>Lorem Ipsum!</span></h2>
      <p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores. 
      </p>
    </div>
  </div>
</section>

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