CSS Grid 响应式布局，具有偶数项的自动调整和最小最大值

Question

我想要完成的事情：

有 4 个网格项目。在最宽的屏幕尺寸下，我希望将项目排成一排：

item_1 item_2 item_3 item_4

随着屏幕宽度的缩小，我希望项目像这样换行到下一行：

item_1 item_2

item_3 item_4

最后在最窄的地方，我希望时间是单列

item_1

item_2

item_3

item_4

我找到了一个例子，它只在可能的情况下包装下一个项目 – https://labs.jensimmons.com/2017/03-009.html

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

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

HTML

<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>

CSS

.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;
}

它几乎可以工作了（下面的 codepen），但我不确定这是否是正确的方法，或者是否有更好的方法来实现这一点。我也尝试过使用 Flexbox，但由于 grid-gap 功能而选择了 CSS Grid。另外，我知道这是可以做到的，但我试图在没有媒体查询的情况下做到这一点。

https://codepen.io/anon/pen/LMqWEr?editors=1100

Answer 1

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%;
}

Answer 2

因此，据我了解，您实际上是在寻找要在缩小时将一行项目转换为一列或多列项目，而不使用媒体查询。

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

CSS Grid 也很强大，但只有当您想使用 2-dimensional layout（行和列）时。

还很高兴知道 Flexbox 是 content-first 与 CSS Grid 是 layout-first 相反>.

Codepen

.flex-container {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.flex-container .flex-item {
    display: flex;
    min-width: 10rem;
    width: calc((100% - 1rem * 8 * 2) / 8);
    height: 10rem;
    padding: 1rem;
    margin: 1rem;
    align-items: center;
    justify-content: center;
    background: #1d1d1d;
    color: #fff;
    font-size: 2rem;
    font-weight: 500;
    text-align: center;
}

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
</div>