小编Dan*_*Dan的帖子

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

我需要显示任意数量的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);
}
Run Code Online (Sandbox Code Playgroud)
<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 …
Run Code Online (Sandbox Code Playgroud)

html css css-grid

4
推荐指数
1
解决办法
1930
查看次数

标签 统计

css ×1

css-grid ×1

html ×1