Grid 거터

사용법

그리드 라인(행/열) 사이 간격(gap)을 조정합니다.

속성	값	비고
row-gap	<line-size>
column-gap	<line-size>
gap	<grid-row-gap> <grid-column-gap>	속기형 속성

그리드 거터 속성의 이름 앞에 붙어 있던 grid- 는 모두 제외 되었습니다. 이전에 사용되던 이름은 grid-row-gap, grid-column-gap, gap 입니다. (모든 브라우저 호환 이전까지는 예전 이름을 사용하거나, postcss-gap-properties를 사용합니다)

예시

.grid-container {
  grid-template-rows: 80px auto 80px;
  grid-template-columns: 100px 50px 100px;
  /* 행 사이 간격 설정 */
  row-gap: 10px;
  /* 열 사이 간격 설정 */
  column-gap: 15px;
}

위 예제에서 다룬 속성을 속기형으로 작성하면 다음과 같습니다.

.grid-container {
  grid-template: 80px auto 80px / 100px 50px 100px;
  /* 행/열 사이 간격 설정 */
  gap: 10px 15px;
}

grid-gap 값으로 1개만 입력하면 행/열 사이 간격이 동일하게 설정됩니다.

gap: 20px; /* grid-row-gap: 20px; grid-column-gap: 20px; */

실습

레퍼런스

그리드 행 / 열 사이 간격을 조정할 수 있습니다. 퍼센트 값은 콘텐츠 영역에 상대적으로 설정 됩니다.

CSS Grid Layout Module Level 1www.w3.org

w3.org/TR/css-grid-1/#gutters