css flex grid с переменной высотой

Question

В настоящее время я изучаю Flex и у меня есть запрос макета, с которым я борюсь.У меня есть множество изображений, которые в настоящее время представлены на странице в UL (хотя они не должны быть).Необходимый макет показан ниже.

Рабочий стол

+------------+------+
|            |      |
|            |      |
|            |------|
|            |      |
|            |      |
+------+-----+------+
|      |            |
|      |            |
|------|            |
|      |            |
|      |            |
+------+------------+

Мобильный

+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+
|                   |
|                   |
|                   |
|                   |
+-------------------+

Я не могу заставить изображения меньшего размера сидеть друг на друге.Первое маленькое изображение расположено справа, но второе изображение переносится на следующую строку под большим изображением.

ul {
  display: flex;
  flex-wrap: wrap;
}


/*
   FOR ILLUSTRATIVE PURPOSES ONLY.
   NOT PART OF THE OBJECTIVE
*/

ul {
  list-style: none;
  width: 650px;
}

div {
  background: red;
  height: 300px;
  width: 390px;
  margin: 5px;
}

li {
  border: 1px dotted red;
}

li:nth-child(2) div,
li:nth-child(3) div,
li:nth-child(4) div,
li:nth-child(5) div {
  width: 190px;
  height: 140px;
  background: green;
}

<ul>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
</ul>   

( codepen )

Answer 1

Лучше рассмотреть CSS-сетку для достижения этого макета, и вы должны учитывать ul / li, а не div внутри, поскольку они не являются частью сетки.

ul {
   display: grid;
   grid-template-columns:1fr 1fr 1fr; /*3 columns*/
   grid-gap:5px;
   list-style: none;
   margin:0;
   padding:0;
   max-width:600px;
}

li:first-child {
   background: red;
   height: 300px; 
   grid-column:1/3; /*take 2 columns 1 - 2*/
   grid-row:1/3; /*take 2 rows 1 - 2*/
}
li:last-child {
   background: red;
   height: 300px; 
   grid-column:2/4;
   grid-row:3/5;
}

li {
   border: 1px dotted red;
}

li:nth-child(2),
li:nth-child(3){
   grid-column:3/4;
   background: green;
}
li:nth-child(3) {
  grid-row:2;
}

li:nth-child(4),
li:nth-child(5) {
   grid-column:1/2;
   grid-row:3;
   background: green;
}

li:nth-child(5) {
   grid-row:4;
}

/*remove the grid and use block*/
@media (max-width:400px) {
 ul {
   display:block;
 }
 ul li:nth-child(n) {
   display:block;
   height:200px;
   margin:5px 0;
 }
}

<ul>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
   <li><div></div></li>
</ul>