CSS - column-gap

• トップ
• CSSリファレンス
• column-gap

概要

サポート (説明)

• マルチカラム：https://caniuse.com/mdn-css_properties_column-gap_multicol_context
• フレックス：https://caniuse.com/mdn-css_properties_column-gap_flex_context
• グリッド：https://caniuse.com/mdn-css_properties_column-gap_grid_context
• calc()利用：https://caniuse.com/mdn-css_properties_column-gap_multicol_context_calc_values

説明

マルチカラム、フレックス、グリッド間の列方向の隙間の幅を指定します。

使用例(マルチカラム)

.multicol {
  column-count: 3;
  column-gap: 5em;
}

<div class="multicol">
いろはにほへとちりぬるを...
</div>

使用例(フレックス)

.flex {
  display: flex;
  column-gap: 3rem;
}
.flex > * {
  flex: 1;
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}

<div class="flex">
  <div>Flex#1</div>
  <div>Flex#2</div>
  <div>Flex#3</div>
</div>

使用例(グリッド)

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3rem;
}
.grid > * {
  background-color: #ddd;
  border: 1px solid #ccc;
  padding: .5rem;
}

<div class="grid">
  <div>Grid#1</div>
  <div>Grid#2</div>
  <div>Grid#3</div>
</div>

関連項目

リンク

• http://www.w3.org/TR/css3-multicol/#column-gap
• https://developer.mozilla.org/ja/docs/Web/CSS/column-gap
• http://caniuse.com/#feat=multicolumn