CSSBattle Apr 19, 2025

문제

풀이

<div class="container">
<div class="grid-box">
  <div class="top-left"></div>
  <div class="bottom-right"></div>
</div>
</div>

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

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  
  width: 100vw;
  height: 100vh;
  
  background: #FEFAED;
}


.grid-box {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 240px;
  height: 180px;
  background: #F9D9BF;
}

.top-left {
  grid-column: 1;
  grid-row: 1;
  background: #C99F96;
}

.bottom-right {
  grid-column: 4;
  grid-row: 2;
  background: #C99F96;
}