Jae Front-end Study

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);
      }
    }
  }
}

CSS Grid

그리드 레이아웃은 웹페이지를 위한 2차원 레이아웃 시스템이다.

행(row, →)과 열(column, ↓)에 콘텐츠를 배치할 수 있고, 쉽게 말해 격자무늬로 생긴 레이아웃을 만들 때 그리드를 사용하면 편리하게 작업할 수 있다.

결과 화면

3 x 3 레이아웃 만들기

1. grid 선언

• HTML

HTML 코드는 계속 동일하다.

<ul class="grid">
  <li>산</li>
  <li>바다</li>
  <li>구름</li>
  <li>자전거</li>
  <li>자동차</li>
  <li>비행기</li>
  <li>사자</li>
  <li>호랑이</li>
  <li>곰</li>
</ul>

• CSS / SCSS

display: grid; 를 선언하면 위의 이미지처럼 격자무늬로 레이아웃이 나뉜 것을 확인할 수 있다.

.grid {
  display: grid;
}

2. rows와 columns를 이용해 행과 열의 모양 만들기

• CSS / SCSS

grid-template-columns 는 열(column, ↓)을 개수는 정할 때 사용한다.

gtid-template-rows 는 행(row, →)의 높이를 정할 때 사용한다.

보통 그리드 레이아웃은 반응형 웹 사이트에서 많이 사용하기 때문에 columns는 1fr 단위를 많이 사용하고,

rows는 고정 높이 값이 아니라면 콘텐츠 높이만큼 영역을 차지하기 때문에 rows는 값을 지정하지 않는다. 

fr은 유연한 크기를 가지는 단위이다.

그리드 컨테이너 내의 공간 비율을 분수(fraction)로 나타낸다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); // = grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: repeat(3, 100px); // = grid-template-rows: 100px 100px 100px;

  // 레이아웃 구별을 위해 색상 CSS를 추가했다.
  li {
    padding: 20px;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      background-color: blanchedalmond;
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      background-color: darkseagreen;
    }

    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9) {
      background-color: cadetblue;
    }
  }
}

3. gap을 이용해서 행과 열에 간격 맞추기

• CSS / SCSS

column-gap 은 열과 열 사이의 간격을 지정한다.

row-gap 은 행과 행 사이의 간격을 지정한다.

gap 은 행과 열을 동일한 간격으로 지정한다.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  column-gap: 20px;
  row-gap: 50px;

  li {
    ...
  }
}

4. flex를 사용해 컨텐츠 가운데 정렬

• CSS / SCSS

gird와 flex를 함께 사용하면 보다 쉽게 레이아웃을 만들 수 있다.

gird는 컨테이너 영역의 레이아웃을 만들 때 사용하면 좋고,

flex는 컨테이너 영역 안의 콘텐츠를 정렬(왼쪽 정렬, 가운데 정렬, 오른쪽 정렬)할 때 사용하면 좋다.

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

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 10px;

    &:nth-child(1),
    &:nth-child(2),
    &:nth-child(3) {
      background-color: blanchedalmond;
    }

    &:nth-child(4),
    &:nth-child(5),
    &:nth-child(6) {
      background-color: darkseagreen;
    }

    &:nth-child(7),
    &:nth-child(8),
    &:nth-child(9) {
      background-color: cadetblue;
    }
  }
}