@import "./../../common/base.css";

/* CSS 함수 */
/* minmax() - 최소, 최대 크기를 지정 */
/* repeat() - 반복 횟수 및 열 또는 행의 크기를 지정 */

/* 그리드 영역 이름 */
.grid-box {
  min-inline-size: 1122px;
  border: 1px solid green;
  padding-inline: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-rows: auto;
  grid-template-areas:
    "item1 item1 item1 item2 item2"
    "item3 item3 item4 item4 item4"
    "item5 item5 item5 item5 item5";
  .grid-item {
    padding: 0.5rem;
  }

  .grid-item1 {
    background-color: gold;
    grid-area: item1;
  }

  .grid-item2 {
    background-color: lightgreen;
    grid-area: item2;
  }

  .grid-item3 {
    background-color: lightpink;
    grid-area: item3;
  }

  .grid-item4 {
    background-color: lightskyblue;
    grid-area: item4;
  }

  .grid-item5 {
    background-color: lightsalmon;
    grid-area: item5;
  }
}

/* 그리드 라인 이름 */
.grid-wrapper {
  min-inline-size: 1122px;
  border: 1px solid green;
  padding-inline: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: [techit-start] 1fr [likelion-start] 1fr [euid-start] 1fr 1fr [likelion-end euid-end] 1fr [techit-end];
  grid-template-rows: repeat(5, 50px);

  .grid-item {
    padding: 0.5rem;
  }

  .grid-item1 {
    background-color: gold;
    grid-column: techit;
  }

  .grid-item2 {
    background-color: lightgreen;
    grid-column: likelion;
  }

  .grid-item3 {
    background-color: lightpink;
    grid-column: euid;
  }

  .grid-item4 {
    background-color: lightskyblue;
  }

  .grid-item5 {
    background-color: lightsalmon;
  }
}

/* 그리드 라인 번호 */
.grid-container {
  min-inline-size: 1122px;
  border: 1px solid green;
  padding-inline: 20px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  grid-template-rows: repeat(5, 50px);

  .grid-item {
    border: 1px solid red;
    padding: 0.5rem;
  }

  .grid-item1 {
    background-color: gold;
    grid-row-start: 1;
    grid-column-start: 1;
    grid-row-end: 4;
    grid-column-end: 2;
  }
  .grid-item2 {
    background-color: lightgreen;
    grid-row: 3 / 5;
    grid-column: 4 / 6;
  }
  .grid-item3 {
    background-color: lightpink;
    grid-row: span 2;
    grid-column: span 2;
  }
  .grid-item4 {
    background-color: lightskyblue;
    grid-row: 5;
    grid-column: 1 / -1;
  }
  .grid-item5 {
    background-color: lightsalmon;
    grid-area: 3 / 2 / span 3 / span 2;
  }
}