[CSS3] grid system : cell

CSS3 2019. 10. 29. 00:05

container로 정의된 grid는 행과 열 단위로 설정은 가능하지만 각 셀을 병합하는 cell단위 설정은 불가능하다.

cell의 병합을 위해서는 grid-column 혹은 grid-row 요소를 사용하여 정의한다.

예를 들어 첫번째 cell과 두 번째 cell을 병합하려면 grid-column: 1 / 3; 으로 속성을 설정하면 된다.

이때 숫자는 grid gap의 라인 번호를 의미한다. column은 좌측을 1번으로 시작해서 오른쪽으로 cell과 cell사이의 gap을 의미하며, row는 상단을 1번으로 시작해서 아래 쪽으로 cell과 cell사이의 gap을 의미한다.

아래 그림의 빨간색 숫자는 column의 수이며, 초록색 숫자는 row의 수이다.

결국 위에서 예를 들은 grid-column: 1 / 3; 은 1번과 2번 셀이 합쳐진 것이다.

grid-column: 1 / 3; 는 grid-column: 1 / span 2; 로 표기해도 된다. gap line 1에서 2개의 cell을 span한다는 의미이다.

<!--
 * 02-css-grid-cell.html v0.3.0
 * Update: 2019.10.28
 * Author: Developer N
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>02-css-grid-cell-v0.1.0</title>
  <style>
    .grid-container {
      display: grid;
      grid: 100px 100px 100px 100px 100px / auto auto auto auto auto auto auto; 
      grid-gap: 5px;
    }
    .cell-1 {
      grid-column: 1 / 3; /* column gap1에서 gap3까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-3 {
      grid-column: 4 / 7; /* column gap4에서 gap8까지 cell 4개를 병합 / span 4와 같은 역할 */
    }
    .cell-4 {
      grid-column: 7 / 8; /* column gap7에서 gap8까지 cell 1개를 지정 */
      grid-row: 1 / 4; /* row gap1에서 gap4까지 cell 3개를 병합 / span 3와 같은 역할 */
    }
    .cell-5 {
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-6 {
      grid-column: 2 / 4; /* column gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-7 {
      grid-column: 4 / 7; /* column gap4에서 gap7까지 cell 3개를 병합 / span 3와 같은 역할 */
      grid-row: 2 / 4; /* row gap2에서 gap4까지 cell 2개를 병합 / span 2와 같은 역할 */
    }
    .cell-8 {
      grid-column: 1 / 7; /* column gap1에서 gap7까지 cell 6개를 병합 / span 6와 같은 역할 */
    }
    div > div {
      background-color: cornflowerblue;
    }    
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="cell-1">(1) .cell-1</div>
    <div>(2)</div> 
    <div class="cell-3">(3) .cell-2</div>
    <div class="cell-4">(4) .cell-4</div>
    <div class="cell-5">(5) .cell-5</div>
    <div class="cell-6">(6) .cell-6</div>
    <div class="cell-7">(7) .cell-7</div>
    <div class="cell-8">(8) .cell-8</div>
    <div>(9)</div>
    <div>(10)</div>
    <div>(11)</div>
    <div>(12)</div>
    <div>(13)</div>
    <div>(14)</div>
    <div>(15)</div>
    <div>(16)</div>
    <div>(17)</div>
    <div>(18)</div>
    <div>(19)</div>
    <div>(20)</div>
    <div>(21)</div>
  </div>
</body>
</html>

위의 code는 style을 gap의 번호로만 표시한 것이고, span과 함께 표시하면 다음과 같다.

  <style>
    .grid-container {
      display: grid;
      grid: 100px 100px 100px 100px 100px / auto auto auto auto auto auto auto; 
      grid-gap: 5px;
    }
    .cell-1 {
      grid-column: 1 / span 2;
    }
    .cell-3 {
      grid-column: 4 / span 3;
    }
    .cell-4 {
      grid-column: 7 / 8;
      grid-row: 1 / span 3;
    }
    .cell-5 {
      grid-row: 2 / span 2;
    }
    .cell-6 {
      grid-column: 2 / span 2;
      grid-row: 2 / span 2;
    }
    .cell-7 {
      grid-column: 4 / span 3;
      grid-row: 2 / span 2;
    }
    .cell-8 {
      grid-column: 1 / span 6;
    }
    div > div {
      background-color: cornflowerblue;
    }    
  </style>

결과는 다음과 같다.

(17)에서 (21)번 cell의 height가 지정되지 않은 것은 처음 cell을 병합하기 전에 grid-container를 선언하여, 병합과정에서 밀린 cell이다. 이런 경우 grid-container를 수정해 주면 된다.

'CSS3' 카테고리의 다른 글

[CSS3] 모서리 둥글게 하는 css 요소 border-radius (0)	2019.12.04
[CSS3] 사용하는 단위계의 종류 (0)	2019.12.03
[CSS3] outline과 border의 차이 (0)	2019.12.01
[CSS3] CSS style guide (0)	2019.11.06
[CSS3] 가로 세로 중앙 정렬 방법(2) (0)	2019.10.30
[CSS3] 가로 세로 중앙 정렬 방법(1) (0)	2019.10.29
[CSS3] grid system : template (0)	2019.10.28
[CSS3] grid system : Basic container (0)	2019.10.28

DeveloperN

개발자 n의 개발 이야기(draft)