使 CSS 网格仅自动填充 2 列

Question

我正在使用 CSS 网格，并在此处找到的代码笔中进行了以下布局：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.

为了"auto-fill"每行最多两列，您需要找到另一种方法。

也许是 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;    /*  */
  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>

使 CSS 网格仅自动填充 2 列

Make CSS Grid auto-fill only 2 columns

html

css

css-grid