小编ste*_*225的帖子

第一张图片应该占据 3/4 或 2 列的可用空间，其余两张图片将垂直位于最后一列的右侧。

<div class="wrapper1">
<div class="one">
  <img  width="1200px"height="500" src="https://images.unsplash.com/photo-1459666644539-a9755287d6b0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=279b60ab483a2610d1e7260dc213898c&auto=format&fit=crop&w=828&q=80" alt="pic1">
  </div>


<div class="two">
  <img height="300px" width="600px" src="https://images.unsplash.com/photo-1508182314998-3bd49473002f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=af394daae4bdbc4a95dc2204984b790d&auto=format&fit=crop&w=1350&q=80" alt="pic2">
  </div>
<div class="three">
  <img  height="300px" width="600px"src="https://images.unsplash.com/photo-1516703914899-e8303d01329a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=b544282e40e1ddee968dac7188ae9a3e&auto=format&fit=crop&w=1350&q=80" alt="pic3">
  </div>

</div>

/* 这是 CSS 样式 */

.wrapper1{
          display:grid;
          grid-column-gap:1px;
          grid-template-columns:repeat(3,1fr);
          grid-template-rows: 200px; 

        }

        .one{
         grid-column:1/3;

        grid-row: 1;

        }

        .two{
          grid-column: 3;
          grid-row:1;   

        }
        .three{
         grid-column:3;
          grid-row:2;
        }
        .wrapper2{
          display: grid;

        }