使用css网格在列方向上的两列布局

Question

我正在尝试使用 CSS 网格创建一个两列布局，其中项目沿列方向流动，我设法创建了布局，但问题是当子项目是动态的时它会中断。这是我尝试过的sn-p。所以基本上grid-template-rows: repeat(4, auto); 应该是动态的，它应该是项目总数的一半。有什么方法可以通过 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

早期 cmets 中提供的带有 column CSS 的示例似乎不适合您的需求：https://jsfiddle.net/hLnvk2b8/、https://jsfiddle.net/hLnvk2b8/1。

如果您想坚持网格流入具有未知行数的列Javascript 可以帮助您更新所需的行数。

SASS 无法访问文档，它只编译 CSS 选择器和 CSS 规则，这就是为什么你需要一个脚本（它也可以在服务器端）来检查 DOM：

通过浏览器端的 javascript 示例：

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

您是否尝试过使用grid-auto-flow:row;，它应该可以正常工作。这是相同的小提琴。我也用过你的小提琴，只修改了一个属性。jsFiddle