一个网格容器，具有任意数量的列而不包装

时间：2018-01-22 20:54:41

标签： html css css3 css-grid

我需要显示任意数量的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>

2 个答案:

答案 0 :(得分：2)

不要使用grid-template-columns。这定义了explicit grid中的列轨道，这是您明确定义的网格。

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

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

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

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

.column {
  grid-row: 1;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

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

......也有效。但它有点黑客攻击。使用grid-auto-columns，您可以获得更自然的解决方案。

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

.column {
  grid-row: 1;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您可以使用flexbox执行此操作，只需将flex-items设置为不增长，不缩小，固定宽度的元素

＆＃13;
＆＃13; 
.grid-1 {
  display: flex;
  width: 300px;
  border: 1px solid #000;
  overflow:auto;
}
.column {
  flex: 0 0 100px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题