CSS Grid を使ってグリッドレイアウトを実装する方法

.large-1 {
  grid-column: 1 / 3;  /*ボックスの横の長さを1番目のグリッドから3番目のグリッドまで*/
  grid-row: 1 / 3; /*ボックスの縦の長さを1番目のグリッドから3番目のグリッドまで*/
}

.wrap {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
}
.box {
  background: #eee;
  padding: 20px;
  border: 2px solid #ccc;
  font-size:13px;
}
.large-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
.large-2 {
  grid-column: 3 / 5;
}
.large-3 {
  grid-column: 4 / 5;
  grid-row: 3 / 5;
}
.large-4 {
  grid-column: 2 / 4;
}
@media (max-width:400px) {
  .wrap {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  .large-1 , .large-2 , .large-3 , .large-4 {
    grid-column: 1/3;
    grid-row: auto;
  }
}