我尝试创建一个动态网格，其中每个新项目都将进入单列中的新行，但最后一个项目必须进入新列并填充整个网格列，而不影响第一列中的其他行。
注意，项目的数量是动态的，因此我不能使用任何固定值和选择器来定义布局。

我寻找的布局：

我所尝试的

如您所见，第一列中的行具有相同的高度，我希望第一列第一行中的项与第一列中的其他行一样，保持其相对于内容的高度。
在这种情况下，第二列中唯一项的高度是无关紧要的，它的高度值将始终高于网格中其他项的高度。

ul {
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: auto auto;
  grid-gap: 20px;
  max-width: 600px;
}

li {
  grid-column-start: 1;
  border: 1px solid black;
}

li.last {
  grid-column-start: 2;
  grid-row: 1/-1;
}

img {
max-width: 100%;
}

<ul>
  <li>here's some content</li>
  <li>here's some content</li>
  <li>here's some content</li>
  <li>here's some content</li>
  <li class="last"><img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80"></li>
</ul>