CSS3

プロパティ

column-gap

→●、mdn

段組カラム間、ボックスのアイテム間の隙間（ギャップ）。

これらのプロパティは、コンテナ内の各アイテム間に空間を追加する、固定長さの 側溝（gutter）を指定する ─ 内容分布プロパティの space-between キーワードに類似な方式で、ただし残りの空間に対する割合分としてではなく、固定サイズにより。column-gap プロパティは、コンテナの行内軸において各ボックスを（行内軸 マージンと同様に）分離するような、各“column”間のアキを指定する。

normal

複 column コンテナ上では、使用値 1em を表現する。他のすべての文脈においては、使用値は 0px になる。

<DIV style="border:1px solid red; width:150px;
 column-count:3;
 column-gap:normal;
 font-size:10pt;
">あああああああああ</DIV>

<DIV style="border:1px solid red; width:150px;
 display:flex;
 column-gap:normal;
 font-size:10pt;
">
 <DIV style="border:1px solid black;
  flex-basis:50px;
 ">1</DIV>
 <DIV style="border:1px solid black;
  flex-basis:50px;
 ">2</DIV>
</DIV>

flex

<DIV style="border:1px solid red; width:150px;
 display:grid;
 grid-template:'a b';
 column-gap:normal;
 font-size:10pt;
">
 <DIV style="border:1px solid black;
 ">1</DIV>
 <DIV style="border:1px solid black;
 ">2</DIV>
</DIV>

grid

<length-percentage> ○

“column”間の gap を指定する。

負な値は無効。

百分率については、§ gap プロパティにおける百分率 を見よ。

<DIV style="border:1px solid red; width:150px;
 column-count:3;
 column-gap:30px;
 font-size:10pt;
 border:1px solid #0008;
">あああああああああ</DIV>

<DIV style="border:1px solid red; width:150px;
 column-count:3;
 column-gap:20%;
 font-size:10pt;
 border:1px solid #0008;
">あああああああああ</DIV>

<DIV style="border:1px solid red; width:150px;
 display:flex;
 column-gap:10px;
 font-size:10pt;
">
 <DIV style="border:1px solid black;
  flex-basis:50px;
 ">1</DIV>
 <DIV style="border:1px solid black;
  flex-basis:50px;
 ">2</DIV>
</DIV>

flex

<DIV style="border:1px solid red; width:150px;
 display:grid;
 grid-template:'a b';
 column-gap:10px;
 font-size:10pt;
">
 <DIV style="border:1px solid black;
 ">1</DIV>
 <DIV style="border:1px solid black;
 ">2</DIV>
</DIV>

grid

側溝による効果は各アイテム間の最小アキであり、［justify-content／align-content］によるアキも追加され得る。そのような追加の空間は、実質的に、側溝のサイズを増やす。

これらのプロパティの正確な取り扱いは、レイアウト コンテナに応じて変わる：

複 column コンテナ

column-gap は、隣接する column ボックス間の側溝を指定する。これが複 column コンテナのレイアウトにどう影響するかの詳細は、[CSS-MULTICOL-1] を見よ。row-gap は、現時点では適用されない。

flex コンテナ

主軸に適用されるときは（例：［flex-direction が row にされた flex コンテナ］における column-gap）、各アイテム間の最小アキを指示する（同じ flex 行において隣接する flex アイテムの合間に固定サイズのマージンが追加で挿入されるかのように）。

交叉軸に適用されるときは（例：［flex-direction が row にされた flex コンテナ］における row-gap）、隣接する flex 行の合間の最小アキを指示する。

格子コンテナ

［row-gap／column-gap］プロパティが格子コンテナに指定されたときは、各［格子 row／格子 column］間の側溝を定義する。精確な詳細は、[CSS-GRID] の § 各種 側溝プロパティ を見よ。

注記： table ボックスにおいては、 gap プロパティを利用しても、各 cell 間の分離を指定することはない。代わりに border-spacing プロパティを利用する： その機能性は少し異なり、継承されることに加え、最も外側の cell と table のボーダーとの合間にも追加のアキを指定する（space-between よりも space-evenly に類似する）。

テスト