更改CSS网格中的列顺序 [英] Change the column order in a css grid

查看：51
本文介绍了更改CSS网格中的列顺序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在玩CSS网格.

当我在桌面尺寸(min-width: 769px)上查看时，我只有一行包含3列-像这样:

When I view it on a desktop size (min-width: 769px) I have a single row with 3 columns - something like this:

---------------------------------------------
|   col 1     |         col 2       | col 3 |
|             |                     |       |
---------------------------------------------

我可以使用css-grid来移动列，以便在移动布局上执行以下操作吗?

Can I with css-grid move the columns around so I can do something like this on a mobile layout:

---------------------------------------------
|     col 1             |      col 3        |
|                       |                   |
---------------------------------------------
|                     col 2                 |
---------------------------------------------

我知道我跨过像这样的单元格:

I know I span cells with something like this:

.content{
  grid-column: 1 / span2;
}

但是我想更改列的顺序.如果没有预处理器，我可以这样做吗?

这是我当前的网格课程:

Here is my current grid class:

.my-grid {
   display:grid;
   grid-template-columns: 15% 1fr 25% ;
   grid-template-rows: 1fr; /* for as many rows as you need */
   grid-gap: 10px;
   border: 2px solid #222;
   box-sizing: border-box;
}

推荐答案

网格布局提供了多种重新排列网格项的方法.我在下面列出了四个.

Grid Layout provides multiple methods for re-arranging grid items. I've listed four below.

  1. grid-template-areas 属性
  2. 基于行的展示位置
  3. order 属性
  4. grid-auto-flow属性的 dense 功能. (对于这种类型的布局，可能是最简单，最简单，最可靠的解决方案，因为它适用于任意数量的网格项目.)
  1. The grid-template-areas property
  2. Line-based placement
  3. The order property
  4. The dense function of the grid-auto-flow property. (Possibly the simplest, easiest and most robust solution for this type of layout, as it works for any number of grid items.)

这是原始布局:

Here's the original layout:

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle演示1

grid-template-areas属性允许您使用ASCII视觉艺术来安排布局.

The grid-template-areas property allows you to arrange your layout using ASCII visual art.

将网格区域名称(为每个元素定义)放置在您希望它们出现的位置.

Place the grid area names (which are defined for each element) in the position where you want them to appear.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
  grid-template-areas: "column-1 column-2 column-3";
}

grid-item:nth-child(1) { grid-area: column-1; }
grid-item:nth-child(2) { grid-area: column-2; }
grid-item:nth-child(3) { grid-area: column-3; }

@media ( max-width: 500px ) {  
  grid-container { 
        grid-template-columns: 1fr 1fr; 
        grid-template-areas: " column-1 column-3 " 
                             " column-2 column-2 ";
   }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle演示2

根据规范:

7.3.命名区域:grid-template-areas 财产

此属性指定 命名网格区域 ，这些区域不是 与任何特定的网格项目相关联，但可以从中引用 网格放置属性.

This property specifies named grid areas, which are not associated with any particular grid item, but can be referenced from the grid-placement properties.

grid-template-areas属性的语法还提供了一个 可视化网格结构，进行整体布局 网格容器的内容更容易理解.

The syntax of the grid-template-areas property also provides a visualization of the structure of the grid, making the overall layout of the grid container easier to understand.

所有字符串的列数必须相同，否则声明无效.

All strings must have the same number of columns, or else the declaration is invalid.

如果命名网格区域跨越多个网格单元，但是这些单元未形成单个填充矩形，则声明无效.

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

注意:在此模块的将来版本中，可能会允许非矩形或不连续的区域.

2.基于行的展示位置

使用grid-row-start，grid-row-end，grid-column-start，grid-column-end或它们的速记grid-row和grid-column来设置网格项目的大小和在网格中的位置.

2. Line-based Placement

Use grid-row-start, grid-row-end, grid-column-start, grid-column-end, or their shorthands, grid-row and grid-column, to set a grid item's size and location in the grid.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { grid-row: 1 / 2; grid-column: 1 / 2; }
  grid-item:nth-child(2) { grid-row: 2 / 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { grid-row: 1 / 2; grid-column: 2 / 3; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle演示3

根据规范:

8.3.基于行的放置:grid-row-start，grid-column-start，grid-row-end和grid-column-end属性

3. order属性

Grid Layout中的order属性与Flex Layout中的属性相同.

3. The order property

The order property in Grid Layout does the same as in Flex Layout.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px; /* for demo */
  grid-gap: 10px;
}

@media ( max-width: 500px ) {  
  grid-container         { grid-template-columns: 1fr 1fr;  }
  grid-item:nth-child(1) { order: 1; }
  grid-item:nth-child(2) { order: 3; grid-column: 1 / 3; }
  grid-item:nth-child(3) { order: 2; }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(2) {
  background-color: orange;
}

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
</grid-container>

jsFiddle演示3

根据规范:

6.3.重新排序的网格项目:order属性

4. grid-auto-flow属性的dense功能

此解决方案可能是此处介绍的所有解决方案中最简单，最简单，最可靠的解决方案，因为它适用于任意数量的网格项目.

4. The dense function of the grid-auto-flow property

This solution is possibly the simplest, easiest and most robust of all presented here, as it works for any number of grid items.

尽管此解决方案在问题描述的布局中没有比前三个提供任何主要优势，该布局仅由三个网格项组成，但是当网格项数很多时，它提供了巨大的好处更高或动态生成.

Although this solution doesn't provide any major advantage over the previous three in the layout described in the question, which consists of only three grid items, it offers huge benefits when the number of grid items is higher or dynamically-generated.

这个问题和上面的解决方案解决了这个问题:

This question and the solutions above address this:

01  03
02  02

但是，我们需要这个:

01  03
02  02

04  06
05  05

07  09
08  08

10  12
11  11

and so on...

使用grid-template-areas，基于行的放置位置和order，该解决方案将需要大量的硬编码(如果我们知道项目总数)，并且可能需要CSS自定义属性和/或JavaScript(如果项目是动态生成的.

Using grid-template-areas, line-based placement and order, the solution would require a lot of hard-coding (if we knew the number of total items) and maybe CSS custom properties and/or JavaScript (if the items were generated dynamically).

CSS Grid的 dense 功能可以轻松简单地处理这两种情况.

The dense function of CSS Grid, however, can handle both scenarios simply and easily.

通过将grid-auto-flow: dense应用于容器，每第三个项目将回填由于连续订购而创建的空白单元格.

By applying grid-auto-flow: dense to the container, each third item will backfill the empty cell created as a result of consecutive ordering.

grid-container {
  display: grid;
  grid-template-columns: 15% 1fr 25%;
  grid-auto-rows: 50px;
  grid-gap: 10px;
}

@media (max-width: 500px) {
  grid-container {
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;     /* KEY RULE; deactive to see what happens without it;
                                  defaults to "sparse" (consecutive ordering) value */
  }
  grid-item:nth-child(3n + 2) {
    grid-column: 1 / 3;
  }
}

/* non-essential decorative styles */
grid-item {
  border: 1px solid gray;
  background-color: lightgreen;
  display: flex;
  align-items: center;
  justify-content: center;
}
grid-item:nth-child(-n + 3)                    { background-color: aqua; }
grid-item:nth-child(n + 4):nth-child(-n + 6)   { background-color: lightgreen; }
grid-item:nth-child(n + 7):nth-child(-n + 9)   { background-color: orange; }
grid-item:nth-child(n + 10):nth-child(-n + 12) { background-color: lightgray; }

<grid-container>
  <grid-item>1</grid-item>
  <grid-item>2</grid-item>
  <grid-item>3</grid-item>
  <grid-item>4</grid-item>
  <grid-item>5</grid-item>
  <grid-item>6</grid-item>
  <grid-item>7</grid-item>
  <grid-item>8</grid-item>
  <grid-item>9</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
</grid-container>

jsFiddle演示4

根据规范:

§ 7.7.自动放置:grid-auto-flow属性

密集

dense

如果指定，自动放置算法将使用密集"包装 算法，它尝试在网格较早时填充孔 较小的物品稍后出现.

If specified, the auto-placement algorithm uses a "dense" packing algorithm, which attempts to fill in holes earlier in the grid if smaller items come up later.

如果省略，则使用稀疏"算法，其中 算法仅在放置物品时在网格中向前"移动， 永远不要回溯以填补漏洞.

If omitted, a "sparse" algorithm is used, where the placement algorithm only ever moves "forward" in the grid when placing items, never backtracking to fill holes.

这篇关于更改CSS网格中的列顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆