CSSグリッドとclip-pathで漫画のようなレイアウト

Result

css

.wrapper {/*レイアウトセッティング*/
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  max-width: 1440px;
  font-size: 0;
}

.hero-item,
.standard-item {/*画像はコンテナいっぱいに*/
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.news-item {
  display: inline-block;
  min-height: 400px;
  width: 50%;
}

.hero-item {/*各画像設定*/
  background-image: url("https://picsum.photos/1500/900");
}

.standard-item:nth-child(2) {
  background-image: url("https://picsum.photos/1200/600");
}

.standard-item:nth-child(3) {
  background-image: url("https://picsum.photos/900/500");
}

.standard-item:nth-child(4) {
  background-image: url("https://picsum.photos/1800/1000");
}

@supports (display: grid) {
  .news-item {
    width: auto;
    min-height: 0;
  }
  .hero-item {/*clip-pathで切り抜き*/
    grid-column: 1 / span 2;
    grid-row: 1 / 50;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 75px), 0 100%);
  }
  .standard-item:nth-child(2) {
    grid-column: 1 / span 1;
    grid-row: 50 / 100;
    clip-path: polygon(0 14%, 0 86%, 90% 81%, 100% 6%);
    margin-top: -73px;
  }
  .standard-item:nth-child(3) {
    grid-column: 2 / span 1;
    grid-row: 50 / 100;
    clip-path: polygon(13% 6%, 4% 84%, 100% 100%, 100% 0%);
    margin-top: -73px;
    margin-left: -15%;
    margin-bottom: 18px;
  }
  .standard-item:nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 100 / 150;
    clip-path: polygon(45% 0, 100% 15%, 100% 100%, 0 100%, 0 5%);
    margin-top: -107px;
  }
}

html

<div class="wrapper">
  <div class="news-item hero-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
  <div class="news-item standard-item">
  </div>
</div>

can i use

via

Comic book style layout with CSS Grid