使用CSS Grid指定要从右侧开始的列

Question

我正在尝试将我的Flexbox布局更改为新的display: grid,我有三列.

<div class="grid">
    <div class="three wide column"></div>
    <div class="two   wide column"></div>
    <div class="two   wide column"></div>
</div>

它看起来像这样:

是否可以指定一些列从右侧开始而不是从左侧开始,如下图所示？

(并且没有指定grid-column-start和grid-column-end,这可以通过margin-left: autoFlexbox完成)

<div class="grid">
    <div class="three wide column"></div>
    <div class="right floated two wide column"></div>
    <div class="right floated two wide column"></div>
</div>

Answer 1

使用负列值可以轻松地将一个项目放入最后一列，但不幸的是 CSS 网格不支持将下一个项目自动移至左侧。项目通过自动放置算法（使用属性控制grid-auto-flow）放置到网格单元中，这是网格容器级别设置 - 意味着您的内容将水平或垂直放置。不允许更改每个元素的轴或方向。

您可以做的是为浮动列创建一个包装元素，grid-column-end: -1;使用 Flexbox 将其扩展到最后一列并放置浮动列。不过，您需要为此更改标记，因此您可能需要重新考虑使用 CSS 网格作为网格系统的布局引擎。它使许多以前几乎不可能的布局变得容易，但在这种情况下它却做了相反的事情。

Answer 2

你写了：

使用 CSS Grid 指定从右侧开始的列

是否可以指定某些列从右侧而不是左侧开始？

答案是“是”。

从网格规范：

9.3. 基于线的放置：grid-row-start、 grid-column-start、grid-row-end和grid-column-end 属性

如果给出负整数，则从显式网格的结束边缘开始反向计数。

所以这个规则...

div {
   grid-column: -1;
   grid-row: -2;
}

...会将您的项目放置在最后一列和倒数第二行中。

更具体地回答你的问题：

Flexbox 允许您通过边距auto和关键字对齐属性（例如justify-content和align-items）跨行和列移动项目。

这是可行的，因为弹性布局沿着列或行运行，而不是同时运行。行和列不相交，因此没有任何障碍物（除其他项目外）限制跨线移动。

网格布局的操作方式不同。它沿着列和行工作，这意味着它们可以相互重叠/相交。（这就是为什么 Grid 可以创建全尺寸网格而 Flexbox 不能。）

当然，行和列交叉的问题在于它们阻碍了跨线的自由移动。对于相交的行和列，auto边距和关键字对齐属性只能在网格区域内起作用，该网格区域可以是单个单元格或任何其他已定义的单元格。

克服此限制的一些方法是：

1. 扩大网格区域（示例）
2. 引入一个 Flex 容器（Flex 和 grid 可以相互嵌套）
3. 使用绝对定位

然而，边距在 Grid 中不像在 Flex 中那样起作用，这一事实auto并不是什么大问题。

网格布局有自己的对齐和定位项目的方法。

您有 12 列布局。您想要将两个两列网格区域移动到行尾。为此，您甚至不需要知道总列数，因为 Grid 允许您从末尾开始计数。这就是您所需要的：

div.column:nth-child(2) {
    grid-column: -5 / span 2;
}

div.column:nth-child(3) {
    grid-column: -3 / span 2;
}

这些规则告诉网格区域跨越两列（无论它们在哪里）。

负整数值从末尾开始计数grid-column。grid-row

div {
   grid-column: -1;
   grid-row: -2;
}

div.column:nth-child(2) {
    grid-column: -5 / span 2;
}

div.column:nth-child(3) {
    grid-column: -3 / span 2;
}

jsFiddle