Макет для изображений в массиве

Question

Вот макет.

По сути, я получаю изображения в массиве и пытаюсь создать галерею с этим макетом.Не уверен, как это сделать.Я пробовал grid, а также: nth-child (четный) и: nth-child (нечетный), но он все еще не работает.

<ul>
    <?php foreach ($images as $image) :?>
      <li><img src="<?php echo $image['url'] ;?>"></li>
    <?php endforeach ;?>
</ul>

Ссылка на jsfiddle -> https://jsfiddle.net/u5tgLj27/

Спасибо.

Answer 1

мы можем сделать так

ul {
max-width:90%;
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
}
ul li {
  list-style-type:none;
  width:calc(50% - 10px);
}
ul li:nth-child(3n + 1) {
  width:100%;
}
ul li img {
  width:100%;
}