具有无限行的 CSS Grid 垂直列答案

【问题标题】：CSS Grid vertical columns with infinite rows具有无限行的 CSS Grid 垂直列
【发布时间】：2017-12-07 22:59:23
【问题描述】：

我有一个长度未知的项目列表（来自 CMS）。我想将它们显示在向下阅读的 2 个垂直列中。例如

1 4 2 5 3 6 等等...

我正在尝试使用 CSS 网格来实现这一点，但是，除非您预先设置行数，否则这似乎是不可能的。我已经按照https://gridbyexample.com/examples/example18/ 尝试过grid-auto-flow: column，但这只是在结束时添加了额外的列。

我觉得这应该可以通过网格实现，但我找不到方法。有人有什么想法吗？

附： 请不要推荐 CSS 文本列。

【问题讨论】：

可能重复：stackoverflow.com/q/44869250/3597276
是的，被这个问题骗了。由于 q 尚未得到回答，我认为这是不可能的。

标签： css css-grid

【解决方案1】：

在不知道确切的项目数量的情况下，仅使用 CSS 网格是不可能的。

解决此限制的唯一方法是为您的后半部分项目添加一个类。

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  
  /* extra styles */
  grid-gap: 0.5rem;
}

span {
  grid-column-start: 1;
  
  /* extra styles */
  background-color: #def;
  padding: 0.5rem;
}

.second-half {
  grid-column-start: 2;
  
  /* extra styles */
  background-color: #abc;
}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>

【讨论】：

嗨。感谢您的回复，但在问题中，我解释说我有一个未知长度的列表，这是不可能的。
在这种情况下，您的问题无法解决（仅使用 CSS 网格）。我改变了我的答案，以展示你可以将样式应用到一个类而不是知道项目的数量。
您也可以将列表设置为固定高度，但是如果您的项目太少，它将太高，如果您的项目太多，可能会自动生成第三列。
如果您可以选择使用 javascript，您可以为后半部分添加类。常量 $allItems = $('span'); if($allItems.length > 1) { const half = Math.floor($allItems.length / 2); $allItems.slice(-half).addClass('second-row'); }

【解决方案2】：

您可以使用包含容器和弹性项目的弹性。您可以限制容器的高度，然后将 flex 的内容包装起来继续下一列：-

<body>
<div class="container">
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</div>
</body>

CSS：

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Read more about flexbox

【讨论】：

【解决方案3】：

如果您的 HTML 已生成，则一种解决方案可以使用 Math.ceil( NUM_ITEMS / NUM_COLUMNS ) 计算容器元素上的 grid-template-rows 属性

在反应中：

function VerticalColumns(props) {
    // props.numColumns matches `grid-template-columns` on `.container` element
    const numRows = Math.ceil(props.items.length / props.numColumns);

    const style = {
        gridTemplateRows: `repeat(${numRows}, 1fr)`,
    };

    return (
        <ul className='container' style={ style }>
            { props.items.map((item, index) => (
                <li key={index}>{ item }</li>
            )) }
        </ul>
    )
}

基础 CSS：

.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
}

【讨论】：

【解决方案4】：

示例：

// This is just to simulate infinite scrolling

var counter = 9;
document.addEventListener('scroll', function(e) {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    var span = document.createElement('span');
    span.innerHTML = ++counter;
    document.body.appendChild(span);
  }
})

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 200px;
  /* how much height must each element occupy! change that! */
  grid-gap: 0.5rem;
}

span {
  background: #3A3A3A;
  text-align: center;
  color: #FFFFFF;
  line-height: 200px;
  font-size: xx-large;
}

<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>

【讨论】：