// layout
.container {
  display: grid;
  width: 650px;
  height: 300px;
  padding-bottom: 40px;
  grid-gap: 5px;
  .item {
    opacity: 80%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    background-color: #D9D9D9;
    padding: 10px;
  }
  .item-a {
    background-color: #5B9BD5;
  }
  .item-b {
    background-color: #ED7D31;
  }
  .item-c {
    background-color: #FFC000;
  }
  .item-d {
    background-color: #70AD47;
  }
}
.separator {
  border-bottom: 1px solid #333333;
  margin-bottom: 30px;
}

// grid-template-columns / grid-template-rows
.container1 {
  grid-template-columns: 100px 150px 150px auto;
  grid-template-rows: [start] 75px [line-2] 150px [line-3] 25% [end];
  .item-a {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: start;
    grid-row-end: line-2;
  }
  .item-b {
    grid-column: 1 / 2;
    grid-row: line-2 / line-3;
  }
  .item-c {
    grid-column: 2 / span 3;
    grid-row: line-2 / span 1;
  }
  .item-d {
    grid-column: 1 / -1;
    grid-row: line-3;
  }
}

// grid-template-areas / grid-areas
.container2 {
  grid-template-columns: 100px 150px 150px auto;
  grid-template-rows: [start] 75px [line-2] 150px [line-3] 25% [end];
  grid-template-areas:
    "header header . ."
    "sidebar content content content"
    "footer footer footer footer";
  .item-a {
    grid-area: header;
  }
  .item-b {
    grid-area: sidebar;
  }
  .item-c {
    grid-area: content;
  }
  .item-d {
    grid-area: footer;
  }
}

.container3 {
  grid-template-columns: repeat(3, 200px);
  grid-template-rows: repeat(3, 100px);
  .item-a {
    justify-self: start;
    align-self: start;
  }
  .item-b {
    justify-self: center;
    align-self: stretch;
  }
  .item-c {
    justify-self: stretch;
    align-self: center;
  }
  .item-d {
    place-self: end stretch; // 合併寫法
  }
}

// grid-auto-columns / grid-auto-rows
.container4, .container5 {
  width: auto;
  height: auto;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(2, 50px);
  grid-auto-columns: 100px;
  grid-auto-rows: 50px;
}

// grid-auto-flow
.container5 {
  grid-auto-flow: column;
}