Change the column order in a css grid

问题

I am playing around with CSS grids.

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 |
|             |                     |       |
---------------------------------------------

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

But I want to change the order of the columns. Can I do that without a pre-processor?

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

回答1:

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

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 demo 1

---

1. grid-template-areas

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 demo 2

spec reference:

7.3. Named Areas: the grid-template-areas property

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

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.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

---

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 demo 3

spec reference:

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

---

3. order

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 demo 3

spec reference:

6.3. Reordered Grid Items: the order property

来源：https://stackoverflow.com/questions/45367864/change-the-column-order-in-a-css-grid