CSS coumn-gap: 열 사이 간격
Baseline넓은 지원
모든 주요 브라우저가 지원하는 기능입니다.
CSS column-gap 속성은 요소의 열 사이 간격을 설정합니다.
column-gap은 다열 레이아웃의 일부로서 정의됐으나, 범위가 확장돼 다양한 레이아웃에서 사용할 수 있습니다. 이제 CSS Box Alignment 모듈에 정의되며 다열, 플렉스, 그리드 레이아웃 모두에서 사용 가능합니다.
초기 명세에서는 grid-column-gap이라는 이름을 사용했습니다. 구형 브라우저와의 호환성 유지를 위해, grid-column-gap 역시 이 속성의 별칭으로 인식됩니다.
.grid {
column-gap: 0;
/* column-gap: 8px; */
/* column-gap: 33%; */
}.grid {
width: 300px;
border: 1px solid #ccc;
color: #fff;
display: grid;
grid: auto-flow / 1fr 1fr;
padding: 8px;
}
.item {
background: #f0f0f0;
color: #000;
display: flex;
align-items: center;
border: 1px solid #ccc;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
}
.item:nth-child(1) {
background: #24c0a5;
color: #fff;
}
.item:nth-child(2) {
background: #0043ff;
color: #fff;
}
.item:nth-child(3) {
background: #b42809;
color: #fff;
}
.item:nth-child(4) {
background: #ffb800;
color: #fff;
}<div class="grid">
<div class="item">1번</div>
<div class="item">2번</div>
<div class="item">3번</div>
<div class="item">4번</div>
<div class="item">5번</div>
</div>불러오는 중...
구문
/* 키워드 값 */
column-gap: normal;
/* <length> 값 */
column-gap: 3px;
column-gap: 2.5em;
/* <percentage> 값 */
column-gap: 3%;
/* 전역 값 */
column-gap: inherit;
column-gap: initial;
column-gap: revert;
column-gap: revert-layer;
column-gap: unset;column-gap 속성에는 한 개의 <length-percentage> 또는 키워드 normal을 사용합니다.
값
normal브라우저 기본 간격을 사용합니다. 다열 레이아웃에서는
1em으로 정의되어 있습니다. 나머지 레이아웃에서는0입니다.<length-percentage>열 간격을 길이 또는 백분율로 설정합니다. 양의 값이어야 합니다.
브라우저 호환성
| 데스크톱 | 모바일 | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| iOS | Android | ||||||||
| Safari | Chrome | Firefox | Safari | Safari WebView | Chrome | Android WebView | Firefox | Samsung Internet | |
column-gap | |||||||||
| Supported in Flex Layout | |||||||||
| Supported in Grid Layout | |||||||||
| Supported in Multi-column Layout | |||||||||
calc() values | |||||||||
<percentage> values | |||||||||
normal | |||||||||
같이 보기
- 행 사이 간격:
row-gap