● row-gap과 column-gap 속성

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

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

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

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

그림 7-15 실행결과