程序实现在空间放置3d物品_第3部分：自动流程，订单和物品放置-CSDN博客

在构建布局时，CSS Grid为我们提供了许多不同的放置项目的选择。在本文中，我们将研究不同的放置方法，如何使用自动流处理避免显式放置每个项目，以及为什么有时网格项可能未放置在您期望的位置。

我喜欢将Grid用作两个不同的部分：

脚手架–或构建网格本身的结构。这涉及到定义要作用于网格容器的属性，从display: grid开始，并描述display: grid的形状以及如何使用grid-template-columns ， grid-template-rows ， grid-auto-columns任意组合和grid-auto-rows （如果使用速记，则为grid / grid-template ）。
布置网格–告诉浏览器应将网格容器的每个子对象放置在何处。

在本文中，我们将深入研究第二部分，尤其是自动放置。

放置网格项目的不同方法

显式放置

允许我们在网格上显式放置项目的属性是：

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column （ grid-column-start / grid-column-end简写）
grid-row （ grid-row-start / grid-row-end简写）
grid-area （ grid-row-start / grid-column-start / grid-row-end / grid-column-end简写）

以上属性是在项目本身上定义的。可能的值包括行号，行名，跨度值或区域名。没有应该和不应该使用的规则，并且可以随意混合和匹配。例如：

.item--a{
	grid-area: a ;
}

.item--b{
	grid-area: 2 / 2 / 4 / 4 ;
}

.item--c{
	grid-row: span 2 / 5 ;
	grid-column: 1 / 3 ;
}

网格模板区域

此外，我们还有grid-template-areas 。此属性是在网格容器上定义的。它允许我们用名称定义网格区域，然后引用这些区域来放置项目：

.grid{
	display: grid ;
	grid-template-columns:repeat( 3 , 1fr );
	grid-template-rows:repeat( 4 , 120px );
	grid-template-areas:
		'a a a'
		'. b b'
		'. b b'
		'. . .';
}

.a{
	grid-area: a ;
}

.b{
	grid-area: b ;
}

这非常酷，因为这意味着我们可以仅通过更改grid-template-areas值来显着更改布局。我们不需要在项目本身上添加或更改任何属性。响应式设计大获成功！

我们可能很想使用grid-template-areas明确地放置每个项目。但是有一个缺点：您不能定义重叠区域。仅使用grid-template-areas无法完成创建如图01所示的布局。

A grid with three items — *图01* 项目2和3重叠，因此只有一个区域可以由“ grid-template-areas”定义。

但是除了按行名或区域放置项目外，我们还可以使用grid-template-areas区域。

.a{
	grid-area: a ;
}

.b{
	grid-area: b ;
}

.c{
	grid-area: 3 / 1 / 5 / 3 ;
}

自动放置

如果我们没有在网格上明确放置项目，它们将被自动放置。默认情况下，每个网格项在行轴和列轴上的跨度均为1，因此它们将被放置到下一个可用的网格单元中。我们可以利用它来发挥我们的优势：如果我们有类似新闻提要的东西，我们不想明确地放置每个项目，特别是如果我们不知道会有多少个项目时。

Auto placement — *图02* 没有明确放置任何项目，因此它们都是自动放置的。

预测自动放置

在上面的示例中，自动放置的规则非常直观：将项目沿行（或内联）轴放置，直到填满该行，然后将它们包装到下一行（如果有则创建新行）。 t定义）。

但是，如果我们有一些明确放置的项目，而另一些没有明确放置的项目，那么我们如何确定自动放置的单元格呢？

如果我使用grid-column: 2 / span 2在网格上放置一个项目，则我可能希望在该项目之后放置的所有自动放置的项目都将放置在我放置的项目之后（ 图03 ）：

Three grid items with a mixture of explicit and auto placement — *图03* 蓝色项目显式放置在行和列轴上（使用`grid-template-columns`和grid-template-columns`）。

上面的代码实际发生的是将后续项目放置在放置的项目之前。它们被放置在第一个可用单元格中，该单元格恰好是我们网格中的前两个。

但是，如果我们把蓝色的项目仅列轴上，将物品放置后的第一个：

那么，为什么放置行为不同？如果我们了解自动放置的规则，情况就会变得更加清晰。

了解流程

考虑这一点的一种好方法是将我们的网格视为一条流动的河流。任何明确放置的物品都是锚定在河中的船。自动放置的物品从左到右围绕这些物品流动（ 图06 ）。

Grid items with a mixture of explicit and auto placement — *图06*

仅显式放置在一个轴上的网格项更松散地锚定。它们参与剩余轴上的网格流。

仅使用span值放置的项目仍将像其他项目一样流动，但是它们将受到其自身显式大小的限制。如果可用的网格列少于2个，则跨度为2的项目将流入下一行。我们可以将它们视为半自动放置的（ 图07 ）。

在图07中，我们仅将项目再次放置在列轴上（使用span ），因此将连续的项目放置在其后。我们有足够的项目来精确地填充网格-但是第六和第七项不是填充早期的网格单元，而是创建隐式轨迹。如果仅将其明确放置在行轴上， 则不会发生这种情况（ 图08 ）。

Auto placed items filling up the explicit grid — *图08* 项目2的行跨度为3

这与网格放置算法中解决项目放置的顺序有关。

改变网格的流动

我们可以使用两个不同的属性来更改网格中项目的顺序。第一个是grid-auto-flow 。这会改变流向，从而改变物品的自动放置方式。可能的值是row （默认值）， column ， row dense和column dense 。

grid-auto-flow：列

通过将值从row更改为column ，我们可以在本演示的第二部分中看到行为已被逆转：放置在列轴上的项目现在比行轴上的项目先解决。将项目放置在列轴上不再会产生隐式网格轨迹，因为将项目打包到每个单元格中，但是将项目放置在行轴上会这样做 。

演示地址

网格自动流：密集

使用dense除了关键字row或column （ row是默认值），我们可以指定自动放置物品应收拾自己到任何可用的网格单元（包括那些前述任何明确放置的物品）。即使将物品仅放置在一个轴上，这也将确保没有间隙。在上面的演示中，您可以看到grid-auto-flow每个值如何改变网格的行为。

订购

order属性不是Grid独有的-它也可以与flexbox一起使用。它允许我们更改流程中单个项目的顺序。项目的默认顺序为0。将自动放置的项目的顺序更改为-1会将其放置在网格的开始处。自动放置的网格项目–在明确放置的项目之后，如果有任何放置在网格的开始位置。

order属性将仅影响自动放置和半自动放置的项目（那些使用单个跨度值的项目）。在下面的演示中，使用order属性更改了紫色项目的位置，但明确放置的蓝色项目不受影响。

演示地址

方向

您可能已经注意到， grid-auto-flow允许我们从row到column更改流的方向，但是它不允许我们使项目从右到左流动。相反，我们可以使用direction属性。这是CSS Writing Modes的一部分，旨在支持国际书写模式，在这种书写模式下，文本的流动方向从左到右。要使网格从右向左流动，可以使用以下命令：