CSS复杂的GRID布局，如何做到这一点？

Question

如何帮助我实现这个布局？

我尝试了很多东西，但都没有达到我想要的效果。我不想使用模板区域。 这是我的 HTML：

<div class="grid-container">
                <p>
                    The exhibition and documentary film "We are all people with developmental disabilities", which was presented in the Staff Gallery, was created in cooperation between Benetton Belgrade and the humanitarian organization Dečje srce... read more
                </p>
                <figure>
                    <img src="img/about/csr-4.png" alt="">
                </figure>
                <figure>
                    <img src="img/about/csr-3.png" alt="">
                </figure>
                <figure>
                    <img src="img/about/csr-2.png" alt="">
                </figure>
                <figure>
                    <img src="img/about/csr-1.png" alt="">
                </figure>
            </div>

Answer 1

看起来像三列三行。

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 100px 50px 100px;
  gap: 1em;
}

.grid-container>*:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  overflow: hidden;
}

.grid-container>*:nth-child(2) {
  grid-column: 1;
  grid-row: 2 / span 2;
}

.grid-container>*:nth-child(3) {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.grid-container>*:nth-child(4) {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.grid-container>*:nth-child(5) {
  grid-column: 3;
  grid-row: 3;
}

figure {
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid-container">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempor nunc mauris, sit amet placerat tortor lobortis dapibus. Nam lectus eros, maximus ac magna vel, congue consequat eros. Fusce id pretium diam. Cras sit amet pharetra ante. Sed quis commodo quam, vel facilisis ipsum. Vestibulum sodales iaculis arcu, et fringilla nisi ullamcorper sed. Donec interdum sit amet est non accumsan. Donec non augue feugiat, fermentum nunc non, convallis est. Cras vel ligula nec odio faucibus ultricies. Sed vulputate tortor eget pretium convallis. Cras interdum elit eget mi porta suscipit. Morbi ut velit diam. Etiam finibus eros et efficitur rutrum. Quisque viverra metus ac eleifend imperdiet. Quisque pretium ut purus vitae tempus. Duis varius risus congue velit faucibus, sed interdum purus consectetur.</p>
    <figure>
        <img src="http://picsum.photos/200">
    </figure>
    <figure>
        <img src="http://picsum.photos/200">
    </figure>
    <figure>
        <img src="http://picsum.photos/200">
    </figure>
    <figure>
        <img src="http://picsum.photos/200">
    </figure>
</div>