具有任意数量列的网格容器，无需换行

Question

我需要显示任意数量的grid-template-columns.

我已经尝试过grid-template-columns: repeat(auto-fill, 100px)，但这会包装超出其父级宽度的所有行。

设置一个大的上限，如：grid-template-columns: repeat(999, 100px)，有效，但似乎应该有更好的方法。

这是我正在使用的示例： https: //codepen.io/anon/pen/BJbvEG

.grid-1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  width: 300px;
  border: 1px solid #000;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(999, 100px);
  width: 300px;
  border: 1px solid #000;
  overflow: auto;
}

.column {
  display: grid;
  grid-template-rows: repeat(12, 1fr);
}

<h3>Auto-fill takes an arbitrary number, but wraps. </h3>
<div class="grid-1">
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
</div>


<h3>A large upper bound works, but I'm looking for a better way.</h3>
<div class="grid-2">
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
</div>

Answer 1

不要使用grid-template-columns. 它定义了显式网格中的列轨道，这是您显式定义的网格。

相反，使用grid-auto-columns. 它定义了隐式网格中的列轨道，它们是在显式网格之外自动创建的列/行。

换句话说，grid-auto-columns您不需要定义任何数量的列。只需让网格容器根据需要创建它们即可。

然后，为了保持所有列水平流动，请将它们全部设置为grid-row: 1。

.grid {
  display: grid;
  grid-auto-columns: 100px;
  width: 300px;
  overflow: auto;
  border: 1px solid #000;
}

.column {
  grid-row: 1;
}

<div class="grid">
  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>

  <div class="column">
    <div>one</div>
    <div>two</div>
    <div>three</div>
    <div>four</div>
    <div>five</div>
    <div>six</div>
    <div>seven</div>
    <div>eight</div>
    <div>nine</div>
    <div>ten</div>
    <div>eleven</div>
    <div>twelve</div>
  </div>
</div>

顺便说一下，只需添加grid-row: 1到第一个示例中的列：

grid-template-columns: repeat(auto-fill, 100px)

...也有效。但这有点黑客行为。有了grid-auto-columns你就有了更自然的解决方案。

grid-template-columns: repeat(auto-fill, 100px)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  width: 300px;
  border: 1px solid #000;
  overflow: auto;
}

.column {
  grid-row: 1;
}