Как изменить порядок и порядок расположения элементов сетки? - PullRequest
Новая
       20

Как изменить порядок и порядок расположения элементов сетки?

3 голосов
/ 08 июня 2019

У меня есть шесть делений A - F.

enter image description here

У меня проблемы с созданием сетки CSS, отвечая этому критерию:

  1. Все элементы div должны иметь одинаковую ширину, несмотря ни на что.

  2. Между C и D мне нужно сделать пространство, пока оно увеличивается при расширении экрана окна.(нажмите DF вправо).как на картинке выше

  3. Когда я сужаю контейнер, DF должен быть сверху и иметь такую ​​же ширину.как на этой картинке:

enter image description here

Вот мой код пока: 

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

Ответы [ 2 ]

2 голосов
/ 09 июня 2019

Другой вариант - использовать макет из 7 столбцов в обычном представлении и поместить D в столбец 5 th , пропустив средний столбец. В мобильном представлении вы можете использовать макет из трех столбцов, а затем сместить элементы 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 голосов
/ 09 июня 2019

Вот одно простое решение:

  • Используйте свойство grid-template-areas для размещения элементов сетки.
  • Используйте пустой столбец с 1fr, чтобы создать пустое пространство вmiddle.
  • Использование медиазапроса для переключения между макетами.

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