column-gap 속성

column-gap 속성은 다중 열 텍스트에서 열 사이의 간격과 그리드에서 열 사이의 간격을 지정합니다. 속성 값은 크기 단위 또는 기본값인 키워드 normal를 사용하며, normal 값을 사용하면 브라우저가 열 사이의 최적 간격을 자동으로 선택합니다.

구문

선택자 {
	column-gap: 값;
}

예제

이 예제에서는 열의 개수인 column-count (3개)와 열 사이의 간격 column-gap을 50px로 지정했습니다. 열의 너비는 이러한 조건(열 개수 및 간격)을 만족하도록 자동으로 조정됩니다:

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	column-gap: 50px;
	text-align: justify;
}

예제 . normal 값

이 예제에서는 열 너비 column-width를 150px로, 열 개수 column-count는 auto 값으로, 열 사이 간격 column-gap은 normal 값으로 설정했습니다. 따라서 브라우저가 필요한 열 개수와 열 사이 간격을 자동으로 선택하지만, 열 너비는 150px로 유지됩니다:

<div id="elem">
	some long text
</div>

#elem {
	column-gap: normal;
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

예제

그리드에서 열 사이의 간격을 설정해 보겠습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

예제

이번에는 열 사이 간격을 % 단위로 설정해 보겠습니다:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
</div>

#parent {
	display: grid;
	column-gap: 5%;
	padding: 10px;
	border: 2px solid #696989;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}
#elem1 {
	grid-column: 1 / 2;
}
#elem2 {
	grid-column: 2 / 3;
}
#elem3 {
	grid-column: 3 / 4;
}

같이 보기

열 너비를 지정하는 속성 column-width
열 개수를 지정하는 속성 column-count
그리드에서 요소 사이의 간격을 지정하는 속성 gap
그리드에서 행 사이의 간격을 지정하는 속성 row-gap