How to re-arrange and reverse order of grid items?

Question

I have six divs A - F.

I have trouble to do css grid by responsive way to match this criteria:

1. All the divs should have the same width no matter what.

2. Between C to D I need to do space while it's grow when expand the window-screen. (push D-F to right). like in the picture above

3. When I shrink the container div D-F should be at the top and have same width div. like in this picture:

Here my code so far:

<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

Another option is to use a 7-column layout in the normal view and placing the D into the 5^th column by skipping the middle column. In the mobile view, you can use a 3-column layout and then shift the D-F elements to the first row - see demo below:

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

Answer 2

Here's one simple solution:

• Use the grid-template-areas property for arranging the grid items.
• Use an empty column with 1fr to create the empty space in the middle.
• Use a media query to trigger the switch between layouts.

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>