column-gap
column-gap プロパティは要素の段や列の間隔を指定します。
プロパティの詳細
- 値
- normal, 長さ（数値、%値)
- 初期値
- normal
- 対象
- 段組み要素、フレックスコンテナ、グリッドコンテナ
- 継承
- しない
- CSS レベル
- CSS 3
値の詳細
※ 一部 W3C 仕様書直訳
| 値 | 詳細 |
|---|---|
| normal | 段組みでは 1em の指定、列にはブラウザ既定の数値、他のレイアウトでは 0 |
| 数値 | px 等で指定、正の数のみ |
| ％値 | ％指定、正の数のみ |
サンプル1
HTML
<div class="box1">
<div>1</div>
<div>2</div>
<div>3</div>
</div>CSS
.box1 {
column-count: 3;
column-gap: 30px;
}
.box1 > div {
background-color: #cccccc;
}