html - 具有任意列数且无需换行的网格容器

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 .这定义了 explicit grid 中的列轨道，这是您明确定义的网格。

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

换句话说，用 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 {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  width: 300px;
  border: 1px solid #000;
  overflow: auto;
}

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