column-gap 속성

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

구문

css선택자 {
  column-gap: 값;
}

예제

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

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

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

Результат:

예제 . normal 값

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

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

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

Результат:

예제

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

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

css#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;
}

Результат:

예제

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

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

css#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;
}

Результат:

같이 보기