CSS Grid 如何让网格单元格变成响应式的新行？答案

【问题标题】：CSS Grid How to get grid cells into a new row responsive?CSS Grid 如何让网格单元格变成响应式的新行？
【发布时间】：2023-02-09 12:27:59
【问题描述】：

我正在尝试让我的页面响应。在某个时候，我的文本溢出到另一个网格单元格中，因为没有足够的空间。如何将这些单元格放入“新”行，以便文本有空间并且我的其他单元格完全可见？

Layout

我需要在我的父网格中添加另一行吗？解决这个问题最简单的方法是什么？最好的情况是几乎没有媒体查询。

谢谢。

【问题讨论】：

您能否分享您尝试过的内容（HTML、CSS、JS），以便人们可以很好地理解问题并帮助您
如果我正确理解你想要的布局，我想我会用 float 而不是网格来实现它。

标签： css responsive-design grid media-queries css-grid

【解决方案1】：

这是在图像和文本下方“添加”另一行的示例。我怀疑您可能不需要第五个框，它可以很容易地从代码中删除。这不是响应部分（因为我们假设您已经在 CSS 的其他地方内置了响应部分。您的实际设置可能是“页面网格”而不是此示例（网格容器），因此发布您的一些代码会对我们有所帮助可视化更好的解决方案。

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  background-color: #2196F3;
  column-gap: 5px;
  row-gap: 5px;
  padding: 5px;
  font-family: arial, san-serif;
  color: #000;
}

.grid-item {
  /*--background-color: rgba(255, 255, 255, 0.5); alternative color for all sections--*/
  border: 2px solid rgba(0, 0, 0, 0.5);
  padding: 20px;
  font-size: 1.5em;
  text-align: left;
}

.item1 {
  grid-column: 1 / span 1;
  background-color: lime;
}

.item2 {
  grid-column: 2 / span 2;
  background-color: yellow;
}

.item3 {
  grid-column: 1 / 2;
  background-color: blue;
}

.item4 {
  grid-column: 2 / 2;
  background-color: orange;
}

.item5 {
  grid-column: 3 / 3;
  background-color: red;
}

<div class="grid-container">
  <div class="grid-item item1">1 image here</div>
  <div class="grid-item item2">2 lots of text here <br>more text <br>more text <br>more text </div>
  <div class="grid-item item3">3 link</div>  
  <div class="grid-item item4">4 link</div>
  <div class="grid-item item5">5 link</div>
</div>

【讨论】：