Two column layout in column direction with css grid - css

Question

I'm trying to create a two-column layout with CSS grid with items flow in a column direction and I managed to create the layout but the problem is when the child items are dynamic it breaks. here's the snippet that I've tried. so basically grid-template-rows: repeat(4, auto); <4> should be dynamic it should be half of the total number of items. Is there any way that I can achieve it through CSS. Click here for fiddle
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: repeat(4, auto);
grid-auto-flow: column;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}

Answer 1

examples provided in earlier comments with column CSS did not seem to suits your needs : https://jsfiddle.net/hLnvk2b8/ , https://jsfiddle.net/hLnvk2b8/1 .
If you want to stick to the grid flowing into column with an unknown amount of rows Javascript could help you update the row's amount needed.
SASS is unable to access the document, it only compiles CSS selectors and CSS rules ,that is why you would need a script (it can be on server side too) to inspect the DOM:
example via javascript on browser's side :
window.onload = resetgrid('2');
function resetgrid(varcol) {
var colnum = varcol;/* how many columns do you want ? */
var child = document.getElementById("gridrow").childElementCount;/* how many children */
var els = child / colnum;/* how many rows could that make */
var rows = Math.round(els);/* row's number cannot be decimal */
var resetrow = document.createElement("STYLE");/* prepare to insert a style sheet */
var rowstyle = document.createTextNode(".grid-container { grid-template-columns:repeat(" + colnum + ",1fr);grid-template-rows: repeat(" + rows + ",auto);}");/* finalize the rules */
resetrow.appendChild(rowstyle);/* insert the rules inside style tag*/
document.head.appendChild(resetrow);/* insert the style tag inside head */
}
.grid-container {
display: grid;
grid-template-columns: 50% 50%;
grid-auto-flow: column;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding: 20px 0;
font-size: 30px;
}
/*demo purpose*/
[data-table] {
display: table;
text-align: center;
margin: auto;
}
<!--demo purpose-->
<div data-table>
<p>reset numbers of columns </p>
<button onclick="resetgrid(1)">1</button>
<button onclick="resetgrid(2)">2</button>
<button onclick="resetgrid(3)">3</button>
</div>
<!--end demo-->
<div id="gridrow" class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
</div>

Answer 2

.two-columns{
width: 300px;
height: 400px;
border: 1px solid;
display: grid;
grid-template-columns: repeat(2, 1fr);
overflow: auto;
}

Answer 3

Have you tried using grid-auto-flow:row; it should ideally work. Here is a fiddle for the same. I have used your fiddle for the same and made changes to only one property.jsFiddle