9

我正在尝试将我的 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>

在此处输入图像描述

4

3 回答 3

4

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

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

于 2017-05-15T18:44:41.417 回答
4

你写了：

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

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

答案是“是”。

从网格规范：

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

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

所以这个规则...

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

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

更具体地说，您的问题：

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

这是因为 flex 布局沿列或行运行，而不是同时运行。行和列不相交，因此没有障碍物（除了其他项目）限制跨线移动。

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

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

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

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

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

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

您有一个 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

.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;
}
<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>

jsFiddle

于 2017-05-15T18:27:45.493 回答
3

实际上，您可以进行正常的网格布局并设置列，就好像您要从左到右开始一样（使用您想要的间距）。然后只需放置“dir：rtl”的Html attr

（运行代码段）

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>

于 2020-04-02T13:04:06.360 回答