使网格容器填充列不是行

Question

使网格容器填充列不是行

我希望我的网格像这样垂直填充：

1 4 7 2 5 83 6 9... arbitrary number of additional rows.

相反，它会像这样水平填充：

1 2 34 5 67 8 9

我想指定网格中的列数，而不是行数。

这就是我的div使用内联CSS样式的样子：

<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div></div>

重要的是我的网格宽3列，但我希望项目按列填充，而不是按行填充。CSS Grid中有可能吗？我已经阅读了这篇https://css-tricks.com/snippets/css/complete-guide-grid/，但没有看到有关订单的任何信息。

CSS Flexbox有flex-direction没有像CSS Grid那样的属性？

Answer 1

对于根据需要创建新列的垂直流动网格，并且未定义行，请考虑使用CSS多列布局（示例）。CSS网格布局（至少当前实现 -&nbsp;级别1）无法执行此任务。这是问题所在：在CSS网格布局中，grid-auto-flow和grid-template-rows/&nbsp;grid-template-columns属性之间存在反比关系。更具体地说，使用grid-auto-flow: row（默认设置）并grid-template-columns定义两者，网格项在水平方向上很好地流动，根据需要自动创建新行。这个概念在问题的代码中说明。#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;row;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>但是，通过切换到grid-template-rows，网格项目堆叠在一列中。#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-rows:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;row;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>没有使用grid-auto-flow: row和自动创建列grid-template-rows。grid-template-columns必须定义（因此，与之相反grid-auto-flow）。#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-rows:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;row;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>在相反的情况下，同样的行为也是如此。使用grid-auto-flow: column和grid-template-rows定义的网格项在垂直方向上流动很好，根据需要自动创建新列。#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-rows:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;column;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>但是，通过切换到grid-template-columns，网格项堆叠在一行中。（这是大多数人提出的问题，包括在这个问题中。）#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;column;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>没有自动创建行。这需要grid-template-rows定义。（这是最常提供的解决方案，但它通常被拒绝，因为布局具有可变数量的行。）#container&nbsp;{ &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-columns:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-template-rows:&nbsp;1fr&nbsp;1fr&nbsp;1fr; &nbsp;&nbsp;grid-auto-flow:&nbsp;column;}<div&nbsp;id="container"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div>因此，考虑如上所述的多列布局解决方案。规格参考：7.7。自动放置：grid-auto-flow属性

Answer 2

另一个选择是删除CSS Grid并使用CSS Columns，它完全符合您的要求，并且还有更好的浏览器支持。.csscolumn&nbsp;{ &nbsp;&nbsp;-webkit-column-count:&nbsp;3;&nbsp;&nbsp;/*&nbsp;Chrome,&nbsp;Safari,&nbsp;Opera&nbsp;*/ &nbsp;&nbsp;-moz-column-count:&nbsp;3;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;Firefox&nbsp;*/ &nbsp;&nbsp;column-count:&nbsp;3;}/*&nbsp;styling&nbsp;for&nbsp;this&nbsp;demo&nbsp;*/.csscolumn&nbsp;{ &nbsp;&nbsp;width:&nbsp;50%;}.csscolumn&nbsp;+&nbsp;.csscolumn&nbsp;{ &nbsp;&nbsp;margin-top:&nbsp;10px; &nbsp;&nbsp;padding-top:&nbsp;10px; &nbsp;&nbsp;border-top:&nbsp;1px&nbsp;solid;}<div&nbsp;class="csscolumn"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div></div><div&nbsp;class="csscolumn"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div></div><div&nbsp;class="csscolumn"> &nbsp;&nbsp;<div>1</div> &nbsp;&nbsp;<div>2</div> &nbsp;&nbsp;<div>3</div> &nbsp;&nbsp;<div>4</div> &nbsp;&nbsp;<div>5</div> &nbsp;&nbsp;<div>6</div> &nbsp;&nbsp;<div>7</div> &nbsp;&nbsp;<div>8</div> &nbsp;&nbsp;<div>9</div> &nbsp;&nbsp;<div>10</div></div>

Answer 3

作为一种技术练习而非实际解决方案，您可以根据项目数量以特定样式获得某种结果让我们看看它是如何工作的：.item:first-child:nth-last-child(n+4):nth-last-child(-n&nbsp;+&nbsp;6)&nbsp;~&nbsp;.item:nth-child(n+3)第一个选择器.item:first-child:nth-last-child(n+4):nth-last-child(-n&nbsp;+&nbsp;6)是活动的是我们的列表有4到6个元素。在这种情况下，某些项目将同时处于第一个条件和第二个条件。在这种情况下，我们希望第一列中有2个项目。使用的目标是剩下的项目（从第三个开始）~&nbsp;.item:nth-child(n+3)并将它们放在第二列。类似的规则，现在是第5和以后~&nbsp;.item:nth-child(n+5)将其他项目放在第三列。这两个规则具有相同的优先级，并且针对最后一项，因此它们按此顺序出现至关重要。我们需要重复类似的规则，直到可以存在的最大项目数量（可能是预处理器的工作）var&nbsp;elements&nbsp;=&nbsp;5;function&nbsp;add&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ctn&nbsp;=&nbsp;document.getElementById("container"); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;ele&nbsp;=&nbsp;document.createElement("div"); &nbsp;&nbsp;&nbsp;&nbsp;elements&nbsp;++; &nbsp;&nbsp;&nbsp;&nbsp;ele.innerHTML&nbsp;=&nbsp;elements; &nbsp;&nbsp;&nbsp;&nbsp;ele.className&nbsp;=&nbsp;"item"; &nbsp;&nbsp;&nbsp;&nbsp;ctn.appendChild&nbsp;(ele);}#container&nbsp;{ &nbsp;&nbsp;width:&nbsp;90%; &nbsp;&nbsp;border:&nbsp;solid&nbsp;1px&nbsp;red; &nbsp;&nbsp;display:&nbsp;grid; &nbsp;&nbsp;grid-template-rows:&nbsp;33%&nbsp;33%&nbsp;33%; &nbsp;&nbsp;grid-auto-flow:&nbsp;column&nbsp;dense;}.item&nbsp;{ &nbsp;&nbsp;width:&nbsp;90%; &nbsp;&nbsp;height:&nbsp;80px; &nbsp;&nbsp;background-color:&nbsp;lightgreen; &nbsp;&nbsp;margin:&nbsp;10px; &nbsp;&nbsp;grid-column:&nbsp;1;}.item:first-child:nth-last-child(n+4):nth-last-child(-n&nbsp;+&nbsp;6)&nbsp;~&nbsp;.item:nth-child(n+3)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;yellow; &nbsp;&nbsp;grid-column:&nbsp;2;}.item:first-child:nth-last-child(n+4):nth-last-child(-n&nbsp;+&nbsp;6)&nbsp;~&nbsp;.item:nth-child(n+5)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;tomato; &nbsp;&nbsp;grid-column:&nbsp;3;}.item:first-child:nth-last-child(n+7):nth-last-child(-n&nbsp;+&nbsp;9)&nbsp;~&nbsp;.item:nth-child(n+4)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;burlywood; &nbsp;&nbsp;grid-column:&nbsp;2;}.item:first-child:nth-last-child(n+7):nth-last-child(-n&nbsp;+&nbsp;9)&nbsp;~&nbsp;.item:nth-child(n+7)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;blueviolet; &nbsp;&nbsp;grid-column:&nbsp;3;}.item:first-child:nth-last-child(n+10):nth-last-child(-n&nbsp;+&nbsp;12)&nbsp;~&nbsp;.item:nth-child(n+5)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;darkcyan; &nbsp;&nbsp;grid-column:&nbsp;2;}.item:first-child:nth-last-child(n+10):nth-last-child(-n&nbsp;+&nbsp;12)&nbsp;~&nbsp;.item:nth-child(n+9)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;chartreuse; &nbsp;&nbsp;grid-column:&nbsp;3;}.item:first-child:nth-last-child(n+13):nth-last-child(-n&nbsp;+&nbsp;15)&nbsp;~&nbsp;.item:nth-child(n+6)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;yellow; &nbsp;&nbsp;grid-column:&nbsp;2;}.item:first-child:nth-last-child(n+13):nth-last-child(-n&nbsp;+&nbsp;15)&nbsp;~&nbsp;.item:nth-child(n+11)&nbsp;{ &nbsp;&nbsp;background-color:&nbsp;tomato; &nbsp;&nbsp;grid-column:&nbsp;3;}<button&nbsp;onclick="add()">Add</button><div&nbsp;id="container"><div&nbsp;class="item">1</div><div&nbsp;class="item">2</div><div&nbsp;class="item">3</div><div&nbsp;class="item">4</div><div&nbsp;class="item">5</div></div>