This page was translated from English by the community.Learn more and join the MDN Web Docs community.
거터 (Gutters)
거터(Gutters) 또는 앨리(alleys)는 콘텐츠 트랙 사이의 간격입니다. 거터는column-gap,row-gap, 또는gap 속성을 사용하여CSS 그리드 레이아웃에서 생성할 수 있습니다.
예제
아래 예에는 행과 행, 열과 열 사이의 간격이 20px인 3개의 열과 2개의 행 트랙 그리드가 있습니다.
* { box-sizing: border-box;}.wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6;}.wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #fff8f8; padding: 1em; color: #d9480f;}css
.wrapper { display: grid; grid-template-columns: repeat(3, 1.2fr); grid-auto-rows: 45%; column-gap: 20px; row-gap: 20px;}html
<div> <div>One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div></div>그리드 크기 측면에서, 간격은 일반 그리드 트랙인 것처럼 작동하지만 간격에 아무것도 배치할 수 없습니다. 간격은 해당 위치의 그리드 선이 추가 크기를 가지게 된 것처럼, 작동하므로 해당 선 뒤에 배치된 모든 그리드 항목은 간격 끝에서 시작됩니다.
row-gap 및column-gap 속성은 트랙 공간을 확보할 수 있는 유일한 요소는 아닙니다. 여백, 패딩 또는상자 정렬의 공간 정렬 속성 사용은 모두 눈에 보이는 간격에 간섭할 수 있습니다. 따라서 우리의 디자인이 이러한 방법 중 하나를 사용하여 추가 공간을 도입하지 않았다는 것을 알고 있지 않는 한,row-gap 및column-gap 속성은 "거터 크기"와 동일하게 고려되어서는 안 됩니다.
같이 보기
속성 참고서
더 읽어보기
- CSS 그리드 레이아웃 안내서:그리드 레이아웃의 기본 개념
- CSS 그리드 레이아웃 명세서의 거터 정의