CSS Grid响应式布局问题：文字先挤压再换行的解决方法

我使用repeat(auto-fit, minmax(300px,1fr))设置宽度实现响应式，但屏幕缩小时，.article类中的文字会先挤压变形才换行，请问有什么解决办法？

原代码 #

CSS #

.section-2 {
  display: grid;
  margin-top: 50px;
  margin-bottom: 50px;
  row-gap: 40px;
  column-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.container {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
}

.image {
  grid-column: 1;
  width: 200px;
  height: 254px;
}

.article {
  align-self: center;
  justify-self: start;
  grid-column: 2;
}

.headings :nth-child(1) {
  font-family: extra-bold;
  font-size: 1.5rem;
  color: grey;
}

HTML #

<div class="section-2">

  <!-- first-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image1" />
    <div class="article article1">
      <div class="headings">
        <p>01</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

  <!-- second-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class=" image image2" />
    <div class="article article2">
      <div class="headings">
        <p>02</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

  <!-- third-image-->
  <div class="container">
    <img src="https://images.unsplash.com/photo-1665770020130-9a363c7f06db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg0Mjc3MDE&ixlib=rb-4.0.3&q=80" class="image image3" />
    <div class="article article3">
      <div class="headings">
        <p>03</p>
        <p>Lorem Ipsum</p>
        <p>Donec laoreet viverra nibh, et viverra felis dignissim nec.</p>
      </div>
    </div>
  </div>

</div>

解决方法 #

方法1：给文字容器设置最小宽度 #

给.article添加min-width，限制文字区域的最小宽度，当容器宽度不足以容纳图片+文字最小宽度时，Grid会自动触发换行，避免文字被挤压：

.article {
  align-self: center;
  justify-self: start;
  grid-column: 2;
  min-width: 200px; /* 添加这行 */
}

你可以根据文字内容调整200px这个值，确保文字在最小宽度下能正常换行而不挤压。

方法2：用媒体查询切换容器布局 #

在小屏幕下，把.container的布局从双列改成单列，彻底避免文字和图片挤在一起：

/* 添加媒体查询 */
@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .image {
    justify-self: center;
    width: 100%; /* 可选：让图片适应容器宽度 */
    max-width: 200px; /* 限制图片最大宽度 */
    height: auto;
  }
  .article {
    justify-self: center;
  }
}

这样当屏幕宽度小于600px时，每个容器会变成图片在上、文字在下的布局，完全不会有文字挤压问题。

方法3：强制文字提前换行 #

给文字容器添加换行属性，让文字在到达容器边缘时自动换行，而不是挤压变形：

.headings p {
  overflow-wrap: break-word;
  word-wrap: break-word; /* 兼容旧浏览器 */
}

这个方法适合需要保持双列布局但不想让文字挤压的场景，不过建议结合方法1一起使用，效果更好。

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