Question

我有6个div，即A-F。

我很难通过响应方式进行CSS网格匹配以符合此条件：

所有div的宽度均应相同。
在C到D之间，当展开窗口屏幕时，我需要在它增长时进行空间处理。（将D-F推到右侧）。就像上面的图片一样
当我收缩容器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

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

使用join属性安排网格项目。
在grid-template-areas中使用空白列，以在中间创建空白。
使用媒体查询触发布局之间的切换。

jsfiddle demo

1fr

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

Answer 2

另一种选择是在普通视图中使用7列布局，并跳过中间的列，将D置于第5 列中。在移动视图中，可以使用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>

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

2 个答案: