时间戳

首页 > 解决方案 > 当原始行上留给它的空间低于一定数量时，如何让我的第二个网格项换行到新行？

html - 当原始行上留给它的空间低于一定数量时，如何让我的第二个网格项换行到新行？

问题描述

.wrapper {
  width: 500px;
  border: 5px solid pink;
  display: grid;
  grid-template-columns: max-content 
  repeat(auto-fit, minmax(70px, 1fr));
  grid-auto-columns: 1fr;
}

.wrapper > *:nth-child(1) {
  background-color: purple;
  width: 200px;
}

.wrapper > *:nth-child(2) {
    background-color: orange;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

GC = 网格容器。GI = 网格项。

我想让我的第二个 GI 填满第 1 行的剩余空间。但是，当 row1 上为第二个 GI 留下的空间达到 70px 以下时，我希望它开始将其换行到下面的新隐式行 - 其宽度跨越容器（1fr）。

当第二个 GI 放到新行上时，我想对其进行 CSS 更改。无论如何要“注意”这个吗？

Chrome 抱怨这是一个无效的值：在此处输入图像描述

标签： htmlcsscss-grid

解决方案

这不是 CSS 网格作业，而是 flexbox 作业

.wrapper {
  border: 5px solid pink;
  display: flex;
  flex-wrap:wrap;
}

.wrapper > *:nth-child(1) {
  background-color: purple;
  width: 200px;
}

.wrapper > *:nth-child(2) {
    background-color: orange;
    flex-basis:70px;
    flex-grow:1;
}
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
</div>

推荐阅读