@import '../../common/modern-reset.css';
@import '../../common/theme.css';
@import '../../common/a11y.css';
@import '../../common/base.css';

.grid {
  margin: 20px;

  border: 1px solid green;
  padding: 20px;

  div:nth-child(1) {
    background: var(--pastel-yellow);
  }
  div:nth-child(2) {
    background: var(--pastel-pink);
  }
  div:nth-child(3) {
    background: var(--pastel-lavender);
  }
  div:nth-child(4) {
    background: var(--pastel-apricot);
  }
  div:nth-child(5) {
    background: var(--pastel-gray);
  }
  div:nth-child(6) {
    background: var(--pastel-mint);
  }
  div:nth-child(7) {
    background: var(--pastel-coral);
  }
}

/* 라인 기반 그리드 박스 */
.grid-box-1 {
  display: grid;
  /* grid-template-rows: 50px 50px 50px 50px; */
  /* grid-template-rows: repeat(7, 50px); */
  /* grid-template-rows: repeat(auto-fill); */
  /* grid-template-rows: repeat(auto-fit); */
  grid-template-rows: repeat(4, 50px);
  grid-template-columns: 1fr 2fr 1fr;

  .grid-item-1 {
    /* 개별 속성 */
    /* grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 3;
    grid-column-end: 3; */

    /* 단축 속성: row와 column */
    /* grid-row: 1/3;
    grid-column: 1/3; */

    /* 단축 속성: row-start/column-start/row-end/column-end */
    /* grid-area: 1/1/3/3; */

    /* span 사용 */
    grid-row: 1 / span 2;
    grid-column: 1 / span 2;
  }

  .grid-item-2 {
    /* grid-area: 4/3/5/4; */
    /* 4번 라인에서 시작해서 2개의 행을 병합 */
    /* grid-row: 4 / span 1; */
    /* 3번 라인에서 시작해서 2개의 열을 병합 */
    /* grid-column: 3 / span 1; */
    /* 한 칸만 차지하면 end를 명시하지 않아도 됨 */
    grid-row: 4;
    grid-column: 3;
  }
  .grid-item-3 {
    /* grid-area: 1/3/2/4; */
    grid-row: 1;
    grid-column: 3;
  }
  .grid-item-4 {
    /* grid-area: 3/1/4/2; */
    grid-row: 3;
    grid-column: 1;
  }
  .grid-item-5 {
    /* grid-area: 3/2/5/3; */
    grid-row: 3 / span 2;
    grid-column: 2;
  }
  .grid-item-6 {
    /* grid-area: 2/3/4/4; */
    grid-row: 2 / span 2;
    grid-column: 3;
  }
  .grid-item-7 {
    /* grid-area: 4/1/5/2; */
    grid-row: 4;
    grid-column: 1;
  }
}

.grid-box-2 {
  display: grid;
  min-width: 642px;
  grid-template-rows: repeat(4, 50px);
  /* minmax(): 최소 최대 길이 제한 */
  /* grid-template-columns: minmax(150px, 1fr); */
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  grid-template-areas:
    'item1 item1 item1 item3'
    'item1 item1 item1 item6'
    '. item5 item5 item6'
    'item7 item5 item5 item2';

  .grid-item-1 {
    grid-area: item1;
  }
  .grid-item-2 {
    grid-area: item2;
  }
  .grid-item-3 {
    grid-area: 1 / 4 / 3 / 5;
    z-index: 10;
  }
  .grid-item-4 {
    grid-area: item4;
  }
  .grid-item-5 {
    grid-area: item5;
  }
  .grid-item-6 {
    grid-area: item6;
  }
  .grid-item-7 {
    grid-area: item7;
  }
}

/* auto-fill vs. auto-fit */
.grid {
  height: 400px;
}
.grid-box-3 {
  border: 1px solid green;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  /* grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
}