使网格容器填充列不是行

Question

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

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

相反,它会像这样水平填充:

1 2 3
4 5 6
7 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

我见过的最简单的方法如下：

.grid {
	display: grid;
	grid-auto-flow: column;
	grid-gap: 1px;
	grid-template-columns: repeat(3, 1fr); 
	grid-template-rows: repeat(5, auto);    
}

<div class="grid">
<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>11</div>
<div>12</div>
<div>13</div>
</div>

Answer 4

您可以根据项目数量使用特定样式来获得某种方式的结果，而不仅仅是将其作为技术解决方案，而不是作为实际解决方案

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

.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)

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

我们需要重复类似的规则，直到可以出现的最大物品数量（可能是预处理器的工作）

.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)

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