如何重新排列和反转网格项目的顺序？

Question

我有六个 div A - F。

我无法通过响应方式来匹配这个标准：

1. 无论如何，所有 div 都应该具有相同的宽度。

2. 在 C 到 D 之间我需要在扩展窗口屏幕时增加空间。 （将 D-F 向右推）。如上图

3. 当我缩小容器 div 时，D-F 应该在顶部并且具有相同宽度的 div。就像这张照片：

到目前为止，这是我的代码：

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

.container {

  background-color: #ddd;

  display: grid;

  /*grid-template-rows: repeat(2, minmax(150px, min-content));*/
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  /* grid-auto-rows: 150px;*/

  .item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered; 

    &--1 { background-color: orangered; }
    &--2 { background-color: yellowgreen; }
    &--3 { background-color: blueviolet; }
    &--4 { background-color: palevioletred; }
    &--5 { background-color: royalblue; }
    &--6 { background-color: goldenrod; }
    &--7 { background-color: crimson; }
    &--8 { background-color: darkslategray; }
 }
}

Answer 1

这是一个简单的解决方案：

• 使用grid-template-areas 属性来排列网格项。
• 使用带有1fr 的空列在中间创建空白空间。
• 使用媒体查询触发布局之间的切换。

jsfiddle demo

.container {
   display: grid;
   grid-auto-columns: minmax(100px, 1fr);
/* OR, to allow the empty middle column to shrink below 100px:
   grid-template-columns: repeat(3,minmax(100px,1fr)) 1fr repeat(3,minmax(100px,1fr));*/
   grid-template-areas: " item1 item2 item3 . item4 item5 item6 ";
}

@media ( max-width: 600px ) {
  .container {
        grid-template-areas:  " item4 item5 item6 "
                              " item1 item2 item3 ";
     /* If you use the commented section above, add the following code here:
        grid-template-columns: repeat(3,minmax(100px,1fr)); */
  }
}

.item--1 { grid-area: item1; background-color: orangered; }
.item--2 { grid-area: item2; background-color: yellowgreen; }
.item--3 { grid-area: item3; background-color: blueviolet; }
.item--4 { grid-area: item4; background-color: palevioletred; }
.item--5 { grid-area: item5; background-color: royalblue; }
.item--6 { grid-area: item6; background-color: goldenrod; }
.item--7 { grid-area: item7; background-color: crimson; }
.item--8 { grid-area: item8; background-color: darkslategray; }

.item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
}

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>

Answer 2

另一种选择是在普通视图中使用 7 列布局，并通过跳过中间列将 D 放入第 5^th 列。在移动视图中，您可以使用 3 列布局，然后将 D-F 元素移动到第一行 - 参见下面的演示：

.container {
  background-color: #ddd;
  display: grid;
  grid-template-columns: repeat(7, minmax(100px, 1fr)); /* 7 columns */
}

.item--4 {
  grid-column: 5; /* skip a column */
}

@media screen and (max-width: 900px) {
  .container {
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 3 columns in mobile view */
  }
  .item--4 {
    grid-column: auto; /* reset column palcement */
  }
  .item--4,.item--5,.item--6 {
    grid-row: 1; /* shift to first row */
  }
}

/* presentation styles */
.item {
  padding: 10px;
  color: white;
  font-family: sans-serif;
  font-size: 30px;
  background-color: orangered;
}
.item--1{background-color: orangered;}
.item--2{background-color: yellowgreen;}
.item--3{background-color: blueviolet;}
.item--4{background-color: palevioletred;}
.item--5{background-color: royalblue;}
.item--6{background-color: goldenrod;}
.item--7{background-color: crimson;}
.item--8{background-color: darkslategray;}

<div class="container">
  <div class="item item--1">A</div>
  <div class="item item--2">B</div>
  <div class="item item--3">C</div>
  <div class="item item--4">D</div>
  <div class="item item--5">E</div>
  <div class="item item--6">F</div>
</div>