CSS Grid vertical columns with infinite rows
Without knowing the exact amount of items this is not possible with CSS grid alone.
The only way to get around this limitation is to add a class to your second half of the items.
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>Example:
// 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>