더북(TheBook)

row-gap과 column-gap 속성

그림 7-10에 나온 그리드 레이아웃 구성 요소를 보면 그리드 갭이 있습니다. 그리드 갭은 행과 열이 만나 이루어지는 그리드 셀과 그리드 셀 사이의 간격인데, 행과 행 사이의 간격은 row-gap, 열과 열 사이의 간격은 column-gap 속성으로 지정할 수 있습니다.

형식

row-gap:<크기>;
column-gap:<크기>;

다음과 같이 코드를 작성하면 행과 행 사이의 간격은 10px, 열과 열 사이의 간격은 20px이 됩니다.

07/02/grid-gap.html

.grid-container{
  (중략)
  row-gap:10px; 
  column-gap:20px;
}

그림 7-15 실행결과

TIP | row-gapcolumn-gap은 유용한 속성이지만, 아쉽게도 IE에서는 지원하지 않습니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.