使网格容器填充列不是行

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网格布局（至少当前实现 - 级别1）无法执行此任务。这是问题所在：

在CSS网格布局中，grid-auto-flow和grid-template-rows/ grid-template-columns属性之间存在反比关系。

更具体地说，使用grid-auto-flow: row（默认设置）并grid-template-columns定义两者，网格项在水平方向上很好地流动，根据需要自动创建新行。这个概念在问题的代码中说明。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;}

<div id="container">
  <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>

但是，通过切换到grid-template-rows，网格项目堆叠在一列中。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;}

<div id="container">
  <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>

没有使用grid-auto-flow: row和自动创建列grid-template-rows。grid-template-columns必须定义（因此，与之相反grid-auto-flow）。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;}

<div id="container">
  <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>

在相反的情况下，同样的行为也是如此。

使用grid-auto-flow: column和grid-template-rows定义的网格项在垂直方向上流动很好，根据需要自动创建新列。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;}

<div id="container">
  <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>

但是，通过切换到grid-template-columns，网格项堆叠在一行中。（这是大多数人提出的问题，包括在这个问题中。）

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;}

<div id="container">
  <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>

没有自动创建行。这需要grid-template-rows定义。（这是最常提供的解决方案，但它通常被拒绝，因为布局具有可变数量的行。）

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;}

<div id="container">
  <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>

因此，考虑如上所述的多列布局解决方案。

规格参考：7.7。自动放置：grid-auto-flow属性

Answer 2

另一个选择是删除CSS Grid并使用CSS Columns，它完全符合您的要求，并且还有更好的浏览器支持。

.csscolumn {
  -webkit-column-count: 3;  /* Chrome, Safari, Opera */
  -moz-column-count: 3;     /* Firefox */
  column-count: 3;}/* styling for this demo */.csscolumn {
  width: 50%;}.csscolumn + .csscolumn {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid;}

<div class="csscolumn">
  <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><div class="csscolumn">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div></div><div class="csscolumn">
  <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>10</div></div>

Answer 3

作为一种技术练习而非实际解决方案，您可以根据项目数量以特定样式获得某种结果

让我们看看它是如何工作的：

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3)

第一个选择器

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6)

是活动的是我们的列表有4到6个元素。在这种情况下，某些项目将同时处于第一个条件和第二个条件。

在这种情况下，我们希望第一列中有2个项目。使用的目标是剩下的项目（从第三个开始）

~ .item:nth-child(n+3)

并将它们放在第二列。类似的规则，现在是第5和以后

~ .item:nth-child(n+5)

将其他项目放在第三列。这两个规则具有相同的优先级，并且针对最后一项，因此它们按此顺序出现至关重要。

我们需要重复类似的规则，直到可以存在的最大项目数量（可能是预处理器的工作）

var elements = 5;function add () {
    var ctn = document.getElementById("container");
    var ele = document.createElement("div");
    elements ++;
    ele.innerHTML = elements;
    ele.className = "item";
    ctn.appendChild (ele);}

#container {
  width: 90%;
  border: solid 1px red;
  display: grid;
  grid-template-rows: 33% 33% 33%;
  grid-auto-flow: column dense;}.item {
  width: 90%;
  height: 80px;
  background-color: lightgreen;
  margin: 10px;
  grid-column: 1;}.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3) {
  background-color: yellow;
  grid-column: 2;}.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+5) {
  background-color: tomato;
  grid-column: 3;}.item:first-child:nth-last-child(n+7):nth-last-child(-n + 9) ~ .item:nth-child(n+4) {
  background-color: burlywood;
  grid-column: 2;}.item:first-child:nth-last-child(n+7):nth-last-child(-n + 9) ~ .item:nth-child(n+7) {
  background-color: blueviolet;
  grid-column: 3;}.item:first-child:nth-last-child(n+10):nth-last-child(-n + 12) ~ .item:nth-child(n+5) {
  background-color: darkcyan;
  grid-column: 2;}.item:first-child:nth-last-child(n+10):nth-last-child(-n + 12) ~ .item:nth-child(n+9) {
  background-color: chartreuse;
  grid-column: 3;}.item:first-child:nth-last-child(n+13):nth-last-child(-n + 15) ~ .item:nth-child(n+6) {
  background-color: yellow;
  grid-column: 2;}.item:first-child:nth-last-child(n+13):nth-last-child(-n + 15) ~ .item:nth-child(n+11) {
  background-color: tomato;
  grid-column: 3;}

<button onclick="add()">Add</button><div id="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div>