具有任意列数且不换行的网格容器

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

您可以使用 flexbox 做到这一点，只需将 flex-items 设置为不增长、不收缩、固定宽度的元素

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

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

Answer 2

不要使用 grid-template-columns. That defines the column tracks in an explicit grid，这是您明确定义的网格。

而是使用 grid-auto-columns. That defines the column tracks in an implicit grid，它们是在显式网格之外自动创建的 columns/rows。

换句话说，使用 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)

... 也有效。但这有点hack。 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>

具有任意列数且不换行的网格容器

A grid container with an arbitrary number of columns without wrapping

html

css

css-grid