98. Naming Grid Lines

 

grid line에 이름을 지을 수 있다

복잡한 부분.........

.container {
  display: grid;
  
  // grid-template-rows: repeat(5, 120px);
  // grid-template-columns:  repeat(4, 1fr);
  grid-template-columns:  repeat(3, [col-start] 1fr [col-end]) 200px [grid-end];
  
  // grid-template-rows: 100px 200px 400px 100px;
  grid-template-rows: [header-start] 100px [header-start box-start] 200px [box-end main-start] 400px [main-end footer-start] 100px [footer-end];
  
  
  background-color: grey;
  height: 600px;
  width: 600px;
  grid-gap: 10px;
  
  & * {
     background-color: orange;
    grid-gap: 10px;
  }
  
  .header {
    background-color: red;
    // grid-column: 1/-1;
    grid-column: col-start 1/grid-end;
  }
  .sidebar {
    // grid-column: 4/5;
    grid-column: col-end 3/ grid-end;
    grid-row: box-start/main-end;
    background-color: royalblue;
  }
  
  .main-content {
    background-color: green;  
    // grid-row: 3/5;
    // grid-column: 1/4;
    grid-column: col-start 1/col-end 3;
  }
  
  .footer {
    grid-column: col-start 1 / grid-end;
  }
}