CSS 具有无限行的网格垂直列
CSS Grid vertical columns with infinite rows
我有一个长度未知的项目列表(来自 CMS)。我想在 2 个垂直列中向下显示它们。例如
1 4
2 5
3 6
etc...
我正在尝试使用 CSS 网格实现此目的,但是,除非您预先设置行数,否则这似乎是不可能的。我已经按照 https://gridbyexample.com/examples/example18/ 尝试了 grid-auto-flow: column
但这只是在结束时添加了额外的列。
我觉得 应该 可以用网格实现,但我找不到办法。有人有什么想法吗?
P.S。 请不要建议 CSS 文本列。
如果不知道项目的确切数量,单独使用 CSS 网格是不可能的。
绕过此限制的唯一方法是在项目的后半部分添加 class。
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>
您可以使用包含容器和弹性项目的弹性。您可以限制容器的高度,然后包裹 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;
}
一个解决方案,如果你的 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);
}
示例:
// 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>
我有一个长度未知的项目列表(来自 CMS)。我想在 2 个垂直列中向下显示它们。例如
1 4 2 5 3 6 etc...
我正在尝试使用 CSS 网格实现此目的,但是,除非您预先设置行数,否则这似乎是不可能的。我已经按照 https://gridbyexample.com/examples/example18/ 尝试了 grid-auto-flow: column
但这只是在结束时添加了额外的列。
我觉得 应该 可以用网格实现,但我找不到办法。有人有什么想法吗?
P.S。 请不要建议 CSS 文本列。
如果不知道项目的确切数量,单独使用 CSS 网格是不可能的。
绕过此限制的唯一方法是在项目的后半部分添加 class。
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>
您可以使用包含容器和弹性项目的弹性。您可以限制容器的高度,然后包裹 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;
}
一个解决方案,如果你的 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);
}
示例:
// 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>