尽管使用 auto-fit/fill 和显式值，但网格 child 元素不会换行

Question

因此，我正在尝试创建一个布局，但在给定 CSS 网格参数的情况下，该布局无法按照我认为应该起作用的方式运行。当然，这是一个用户错误，但我不确定我遗漏了什么。

设置是这样的：

将 parent 元素显示为网格
首先添加 child，最小值为 24rem
添加第二个child，固定值为19rem

目标是：

当视口缩小时，第二个 child 应该环绕在第一个 child 下方。

给出明确的值，我希望它们在视口缩小时换行。但无论我尝试什么值或组合，都不会发生换行。感觉就像将它包装起来保留给重复具有相同值的元素，例如：

repeat(auto-fit,(200px,1fr))

示例代码如下：

.main {
  max-width:1000px; 
  background-color:skyblue; 
  margin-left:auto; 
  margin-right:auto;
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr) 19rem);
  padding: 20px;
}

.parent .child:first-child {
  background-color: #eeeeee;
  height: 300px;
}
.parent .child:last-child {
  background-color: #cccccc;
 height: 300px;
}

<div class="main">
<div class="parent">
  <div class="child">first</div>
  <div class="child">second</div>
</div>
</div>

我错过了什么？？

Answer 1

您需要通过 mediaquerie 将您的栏模板从 2（或更多自动填充）重置为真正的单个。

repeat(auto-fill, minmax(24rem, 1fr) 19rem)设置最少2列，其中一列固定大小为19rem。如果更多的内容，它会变成 4 列，依此类推:)

可能的例子：

.main {
  max-width:1000px; 
  background-color:skyblue; 
  margin-left:auto; 
  margin-right:auto;
}

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr) 19rem);
  padding: 20px;
}

.parent .child:first-child {
  background-color: #eeeeee;
  height: 300px;
}
.parent .child:last-child {
  background-color: #cccccc;
 height: 300px;
}
@media  (max-width : 600px)  {
.parent {
  grid-template-columns: 1fr;
  }
}

<div class="main">
<div class="parent">
  <div class="child">first</div>
  <div class="child">second</div>
</div>
</div>

尽管使用 auto-fit/fill 和显式值，但网格 child 元素不会换行

Grid child elements won't wrap despite using auto-fit/fill and explicit values

css

grid