我想创建一个有2列的div，当我在我的父div中添加一个项目时，它应该在第一列，当第一列有3个元素时，我想添加另一个项目，它应该在第二列。这是我正在寻找的图像：
我没有在互联网上找到一个响应，我试过CSS网格生成器，但没有..CSS网格生成器，但我不能有一个正确的答案
0sgqnhkj1#
在HTML中你需要做的就是：
<div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">3</div> <div class="child">4</div> <div class="child">5</div> <div class="child">6</div> </div>
和css：
.parent{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; grid-template-rows:1fr 1fr 1fr; }
Demo
s71maibg2#
好的……看起来你只是有网格流的问题。要更改它，请使用grid-auto-flow: column;，就是这样，网格的流将从行更改为列。您可以根据需要更改grid-template-rows。
grid-auto-flow: column;
grid-template-rows
2条答案
按热度按时间0sgqnhkj1#
在HTML中你需要做的就是：
和css：
Demo
s71maibg2#
好的……看起来你只是有网格流的问题。要更改它，请使用
grid-auto-flow: column;，就是这样，网格的流将从行更改为列。您可以根据需要更改grid-template-rows。