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: auto和Flexbox完成此操作

<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网格指定要从右侧开始的列

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

答案是＆＃34;是＆＃34;。

来自网格规范：

9.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties

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

所以这条规则......

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

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

更具体地说，你的问题：

Flexbox允许您使用auto页边距和关键字对齐属性（例如justify-content和align-items）在行和列之间切换项目。

这是有效的，因为flex布局沿着或列行，而不是同时进行。行和列不相交，因此没有障碍物（除了其他物品）限制在线上的移动。

网格布局的运作方式不同。它适用于列和行，这意味着它们可以相互重叠/相交。（这就是Grid可以创建全尺寸网格而Flexbox不能创建的原因。）

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

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

展开网格区域（example）
引入一个弹性容器（flex和grid可以互相嵌套）
use absolute positioning

但是，auto边距在网格中不像flex一样有效，这并不是什么大问题。

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

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

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

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

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

Negative integer values on grid-column and grid-row start the count at the end side.

＆＃13;

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column-gap: 15px;
  height: 50vh;
}

div.column:nth-child(1) {
  grid-column: 1 / span 3;
  background-color: gray;
}

div.column:nth-child(2) {
  grid-column: -5 / span 2;
  background-color: gray;
}

div.column:nth-child(3) {
  grid-column: -3 / span 2;
  background-color: gray;
}

.grid>div {
  background-color: lightgray;
  grid-row: 1;
}

＆＃13;

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

＆＃13;

jsFiddle

Answer 3

实际上，您可以进行常规的网格布局并设置列，就像从左到右开始（使用所需的间距）一样。然后只需将Html属性设置为“ dir：rtl”

（运行摘要）

ul {
  border: 1px solid black;
  width: 80%;
  height: 300px;
  display: grid;
  grid-auto-flow: column;
  list-style: none;
}

li {
  width: 20px;
  height: 100%;
  border: 1px solid green;
}

.colored {
  background: green;
}

<ul dir="rtl">
  <li class="colored"></li>
  <li class="colored"></li>
  <li></li>
  <li></li>
  <li class="colored"></li>
</ul>

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

3 个答案:

jsFiddle