具有无限行的CSS网格垂直列_Css_Css Grid

具有无限行的CSS网格垂直列

css

具有无限行的CSS网格垂直列,css,css-grid,Css,Css Grid,我有一个长度未知的项目列表（来自CMS）。我想在两个垂直列中显示它们，向下读取。e、 g 1 4 2 5 3 6 etc... 1 4 2 5 3 6 等我试图通过CSS网格实现这一点，但是，除非您预先设置行数，否则这似乎是不可能的。我已经尝试了按的网格自动流：列，但这只是在结束时添加了额外的列我觉得这应该是可能的网格，但我找不到一个方法。有人有什么想法吗注意：请不要建议使用CSS文本列。如果不知道项目的确切数量，仅使用CSS网格是不可能的绕过此限制的唯一方法是在项目的后半部分添加一个

我有一个长度未知的项目列表（来自CMS）。我想在两个垂直列中显示它们，向下读取。e、 g

1 4 2 5 3 6 etc... 1 4 2 5 3 6 等我试图通过CSS网格实现这一点，但是，除非您预先设置行数，否则这似乎是不可能的。我已经尝试了按的

网格自动流：列

，但这只是在结束时添加了额外的列

我觉得这应该是可能的网格，但我找不到一个方法。有人有什么想法吗

注意：请不要建议使用CSS文本列。

如果不知道项目的确切数量，仅使用CSS网格是不可能的

绕过此限制的唯一方法是在项目的后半部分添加一个类

正文{
显示：网格；
网格模板柱：1fr 1fr；
网格自动流动：行密集；
/*额外样式*/
网格间距：0.5雷姆；
}
跨度{
网格列开始：1；
/*额外样式*/
背景色：#def；
填充：0.5雷姆；
}
.下半场{
网格列开始：2；
/*额外样式*/
背景色：#abc；
}

1
2.
3.
4.
5.
6.
7

您可以使用一个flex，其中有一个容器和一个flex项。您可以限制容器的高度，然后包装flex的内容，以便在下一列中继续：-

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

一种解决方案如果生成HTML，您可以使用

Math.ceil（NUM\u ITEMS/NUM\u COLUMNS）计算容器元素上的网格模板行
属性。

在反应中：

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

例如：

//这只是为了模拟无限滚动
var计数器=9；
document.addEventListener（'scroll'，函数（e）{
如果（document.body.scrollTop>50 | | document.documentElement.scrollTop>50）{
var span=document.createElement（'span'）；
span.innerHTML=++计数器；
document.body.appendChild（span）；
}
})

正文{
显示：网格；
网格模板柱：1fr 1fr；
网格自动行：200px；
/*每个元素必须占据多少高度！改变它*/
网格间距：0.5雷姆；
}
跨度{
背景#3a3a；
文本对齐：居中；
颜色：#FFFFFF；
线高：200px；
字体大小：xx大号；
}

1
2.
3.
4.
5.
6.
7.
8

可能重复：是的，重复那个问题。由于q还没有得到回答，我认为这是不可能的。感谢您的回复，但在问题中，我解释了我有一个未知长度的列表，这样做是不可能的。在这种情况下，您的问题无法解决（仅使用CSS网格）。我更改了答案，以展示您可以将样式应用于类，而不必知道项目的数量。您也可以将列表设置为固定高度，但如果项目太少，则列表将太高，如果项目太多，则可能会自动生成第三列。

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

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