如何在不编辑 HTML 结构的情况下获得这个 Flex 布局？

Question

这是我试图用 CSS 实现的布局：

这就是我拥有的、根本无法触及的 HTML 结构，以及我设法用 CSS 添加的内容。已经很接近了，但还缺少一些东西：

.container {
  display: flex;
  flex-wrap: wrap;
}

.item-1 {
  flex: 50%;
}

.item-2 {
  flex: 50%;
}

.item-3 {
  flex: 100%;
}

<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short desc goes here.
  </div>
</div>

我该如何解决这个问题？谢谢！

Answer 1

使用

grid

：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /*two equal width columns.*/
  grid-template-rows: auto auto; /* two rows with auto height. */
  grid-gap: 10px;
}

.item-1 {
  grid-row: 1 / 3;
}

.item-2 {
  grid-row: 1 / 2;
}

.item-3 {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

<div class="container">
  <div class="item-1">
    This is an image
  </div>
  <div class="item-2">
    This is a title
  </div>
  <div class="item-3">
    Short desc goes here.
  </div>
</div>