96. Grid Challenge

 

과제 완료

비슷한 것 같다?

 

<div class="container">
  <div class="item-1 header">Header</div>
  <div class="item-2 smallbox-1">Small box-1</div>
  <div class="item-3 smallbox-2">Small box-2</div>
  <div class="item-4 smallbox-3">Small box-3</div>
  <div class="item-5 sidebar">Side bar </div>
  <div class="item-6 main-content">Main Content</div>
  <div class="item-7 footer">Footer</div>
</div>

 

.container {
  display: grid;
  grid-template-rows: repeat(5, 120px);
  grid-template-columns:  repeat(4, 120px);
  
  & * {
     background-color: orange;
    
    grid-gap: 10px;
  }
  
  .item-1 {
    background-color: red;
    grid-column: 1/-1;
  }
  .item-5 {
    grid-column: 4/5;
    grid-row: 2/5;
    background-color: royalblue;
  }
  
  .item-6 {
    background-color: green;  
    grid-row: 3/5;
    grid-column: 1/4;
  }
  
  .item-7 {
    grid-column: 1/ 5;
  }
}