[CSS] Grid를 사용해서 반응형 차트 만들기 (grid-column, grid-row)

grid-column, grid-row

grid-column 속성은 그리드 라인 숫자에 맞춰 시작 열과 끝 열을 지정할 수 있다.

grid-row 속성은 그리드 라인 숫자에 맞춰 시작 행과 끝 행을 지정할 수 있다.

 

결과 화면

• 피씨

 

• 모바일

 

• CSS / SCSS

그리드 레이아웃 안에 또 그리드를 사용해도 된다.

하지만 display: grid; 만 사용하면 원하는 영역만큼 공간을 차지하지 않기 때문에 grid-column, grid-row를 함께 사용한다.

 

귤 영역: grid-column: 1 / 3;

열의 1번째 라인부터 3번째 라인까지 영역을 차지한다.

 

귤 영역: grid-column: 1/2; grid-row: 1/3;

열의 1번째 라인부터 2번째 라인까지 영역을 차지한다.

행의 1번째 라인부터 3번째 라인까지 영역을 차지한다.

 

오렌지 영역: grid-column: 2/3;

열의 2번째 라인부터 3번째 라인까지 영역을 차지한다.

 

레몬 영역: grid-column: 2/3;

열의 2번째 라인부터 3번째 라인까지 영역을 차지한다.

 

.chart {
  ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;

    li {
      ...
    }
  }

  // 첫번째 차트 (회색)
  .first {
    background-color: #999;
  }

  // 두번째 차트 (진한 회색)
  .second {
    ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 100px 100px;
      gap: 20px;

      li {
        background-color: #333;

        &:nth-child(1) {
          grid-column: 1 / 3;
        }
      }
    }
  }

  // 세번째 차트 (빨강)
  .third {
    ul {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 100px 100px;
      gap: 20px;

      li {
        background-color: #d90000;
      }
    }
  }
}

@media screen and (max-width: 1024px) {
  .chart {
    ul {
      grid-template-columns: repeat(1, 1fr);

      li {
        ...
      }
    }

    // 첫번째 차트 (회색)
    .first {
      height: 100px;
    }

    // 두번째 차트 (진한 회색)
    .second {
      ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 100px);

        li {
          &:nth-child(1) {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
          }

          &:nth-child(2) {
            grid-column: 2 / 3;
          }

          &:nth-child(3) {
            grid-column: 2 / 3;
          }
        }
      }
    }

    // 세번째 차트 (빨강)
    .third {
      ul {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(1, 100px);
      }
    }
  }
}