CSSBattle Apr 10, 2025

문제

풀이

<div class="grid-container">
  // 위 직사각형 3개
  <div class="box row"></div>
  <div class="box row"></div>
  <div class="box row"></div>
  // 아래 직사각형 1개
  <div class="box column"></div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
}

.grid-container {
  display: grid;
  /* 가로 3칸 */
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 20px;
  padding: 52px 30px;
  background: #FFFFFF;
}

.box {
  background: #BDC8D1;
}

.row {
  height: 140px;
}

.column {
  height: 36px;
  grid-column: span 3;
}