html - 使 CSS 网格仅自动填充 2 列

Question

我正在使用 CSS Grid 并在此处找到的代码笔中进行了以下布局:https://codepen.io/alexg2195/pen/xLEeMd

我的问题是，当使用 repeat(auto-fill, minmax(400px, 1fr)); 时，我最终得到的布局超出了两列。

有没有办法强制两列但仍然具有相同的最小自动填充调整大小行为？

body {
  margin: 40px;
}

.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 100px;
  grid-template-areas: "main btn" "main .";
}

.btn {
  grid-area: btn;
  background-color: #444;
  color: #ddd;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.boxes {
  grid-area: main;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

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

<div class="layout">
  <div class="boxes">
    <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 class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
    <div class="box j">J</div>
    <div class="box k">K</div>
    <div class="box l">L</div>
    <div class="box m">M</div>
  </div>
  <div class="btn">BTN</div>
</div>

Answer 1

Is there a way to force two columns but still have the same min auto fill resize behaviors?

不适用于 auto-fill/auto-fit。

构建这些函数是为了在不溢出容器的情况下适应最大数量的轨道。

7.2.2.2. Repeat-to-fill: auto-fill and auto-fit repetitions

When auto-fill is given as the repetition number, if the grid container has a definite size or max size in the relevant axis, then the number of repetitions is the largest possible positive integer that does not cause the grid to overflow its grid container.

为了“自动填充”每行最多两列，您需要找到另一种方法。

也许是 flexbox？

revised demo

body {
  margin: 40px;
}

.layout {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 100px;
  grid-template-areas: "main btn" "main .";
}

.btn {
  grid-area: btn;
  background-color: #444;
  color: #ddd;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.boxes {
  grid-area: main;
  display: flex;
  flex-wrap: wrap;
}

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

div.box.n {
  visibility: hidden;    /* https://stackoverflow.com/q/42176419/3597276 */
  height: 0;
}

<div class="layout">
  <div class="boxes">
    <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 class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
    <div class="box j">J</div>
    <div class="box k">K</div>
    <div class="box l">L</div>
    <div class="box m">M</div>
    <div class="box n">N</div>
  </div>
  <div class="btn">BTN</div>
</div>