Html CSS网格响应布局，具有自动调整功能和最小值，适用于偶数项

我正在努力实现的目标：

有4个网格项。在屏幕最宽的情况下，我希望项目排成一行：

项目1项目2项目3项目4

随着屏幕宽度的缩小，我希望项目以如下方式包装到下一行：

项目1项目2

第3项第4项

最后，我希望《泰晤士报》是一个单一的专栏

项目1

项目2

项目3

项目4

我找到了一个这样做的例子，但只有在下一个项目可以包装时，才可以-

在此基础上，我尝试使用基于示例模型的嵌套网格容器：

grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));

HTML

这几乎是可行的（下面是codepen），但我不确定这是正确的方法还是有更好的方法来实现这一点。我也尝试过使用Flexbox，但选择CSS网格是因为网格间隙特性。此外，我知道这是可以做到的，但我正在努力做到这一点，没有媒体的质疑

---

因此，根据我的理解，您实际上是在不使用媒体查询的情况下，在收缩时将一行项目转换为一列或多列项目

考虑到这一点，最好的方法是使用Flexbox，因为它是一维的

CSS-Grid也很强大，但仅当您希望使用二维布局时（因此行和列都是如此）

另外，很高兴知道Flexbox是内容优先而不是CSS网格，后者是布局优先

.flex容器{
显示器：flex；
宽度：100%；
柔性包装：包装；
证明内容：中心；
}
.flex容器.flex项目{
显示器：flex；
最小宽度：10雷姆；
宽度：计算（（100%-1rem*8*2）/8）；
高度：10雷姆；
填充：1rem；
保证金：1rem；
对齐项目：居中；
证明内容：中心；
背景：#1d；
颜色：#fff；
字号：2rem；
字号：500；
文本对齐：居中；
}

1.
2.
3.
4.
5.
6.
7.
8.

我尝试了以下解决此问题的方法，希望能奏效
https://codepen.io/ronsummer/pen/eYOKRzg
A.
B
C
D
E
F
身体{
利润率：40像素；
}
.包装纸{
显示：网格；
网格模板列：重复（自动拟合，最小值（300px，1fr））；
栅隙：10px；
背景色：#fff；
颜色：#444；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}

嵌套容器看起来是一种很好的方法，前提是您不需要项目1和2与项目3和4交互。例如，

order

属性在它们之间不起作用。正如您所指出的，媒体查询是另一个（可能更干净、更高效）选项。谢谢您的回复。我也尝试过使用Flexbox，但是我发现了一些缺点，主要是控制第一个和最后一个盒子两侧空间的能力。CSS网格具有网格间距属性，该属性仅添加框之间的空间。我查看了你的代码笔，但它并没有完全解决我要找的问题…我尝试使用嵌套容器的原因是为了避免出现第一行有3个项目，第二行有1个项目的情况…我试图让它首先是每行4个项目，然后是2个，然后是1个。你还可以使用Flexbox控制项目之间的空间，只需使用

：not（：first child）

或

：not（：last child）

伪选择器，然后在第一种情况下使用

左边距：1rem

或第二种情况下使用

右边距：1rem

添加所需间距。然后根据项目数创建自己的计算规则。因此，公式为

width:calc（（100%-（（n-1）*m））/n

，其中n是项目数量，m是项目之间的间隙。希望能有帮助。不过，只有当容器不会包装物品时，这才行，否则会造成错位。你是个救生员

<div class="outer_grid">
  <div class="grid">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
  </div>
  <div class="grid">
    <div class="item">item 3</div>
    <div class="item">item 4</div>
  </div>
</div>

.outer_grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
  grid-template-row:1fr 1fr;
  grid-gap:1em;
  border:5px solid blue;
}

.grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-row:1fr 1fr;
  grid-gap:1em;
  border:5px solid green;
  height:200px;
}

.item {
  border:2px solid red;
}

I tried the below fix for this question and hope it works

https://codepen.io/ronsummer/pen/eYOKRzg

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}