使CSS网格自动填充仅2列

Question

我正在使用CSS Grid并在此处找到的codepen中进行了以下布局: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

有没有一种方法可以强制两列，但仍然具有相同的最小自动填充调整大小行为？

不能与auto-fill/一起使用auto-fit。

这些功能旨在适应最大数量的轨道而不会导致容器溢出。

7.2.2.2。重复填充：auto-fill和auto-fit 重复

当auto-fill给出作为重复数时，如果网格容器在相关轴上具有确定的大小或最大大小，则重复数是最大可能的正整数，不会导致网格溢出其网格容器。

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

也许flexbox？

修改后的演示

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>