CSS网格：autofit无法正常工作

当我重复minmax值的2时，下面的代码将2个矩形div正确地放置在一行上。当我重复自动拟合或自动填充时，它会中断

工作示例：

//css
正文{背景色：黑色；}
.长矩形{
边框：2个白色虚线；
高度：100px；
宽度：400px；
}
#外部容器{
显示：网格；
边框：2倍纯绿；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
}

我的屏幕宽度为2行，介于200px和一个完整的帧之间，以适合1行。为什么默认为2行？正确的调整是什么

---

这里的目的是获得一个示例，该示例将模拟以小屏幕宽度将2个元素包装到垂直堆栈中。默认值应为2列。

其

自动调整

而非

自动调整

。您也不需要在

.longRectangle

上设置宽度，因为这将由网格控制

body{背景色：黑色；}
.长矩形{
边框：2个白色虚线；
高度：100px；
}
#外部容器{
显示：网格；
边框：2倍纯绿；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
}

其

自动装配

非

自动装配

。您也不需要在

.longRectangle

上设置宽度，因为这将由网格控制

body{背景色：黑色；}
.长矩形{
边框：2个白色虚线；
高度：100px；
}
#外部容器{
显示：网格；
边框：2倍纯绿；
网格模板列：重复（自动拟合，最小值（200px，1fr））；
}

auto-fit

not

autofit

auto-fit

not

autofit

<div id="outerContainer">
  <div class="longRectangle"></div>
  <div class="longRectangle"></div>
</div>

// css
body { background-color: black; }

.longRectangle {
  border: 2px dashed white;
  height: 100px;
  width: 400px;
}

#outerContainer {
  display: grid;
  border: 2px solid green;
  grid-template-columns: repeat(autofit, minmax(200px, 1fr));
}