css - 带有 css 网格的列方向的两列布局

Question

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

早期评论中提供的示例 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>