CSS - column-wrap

概要

属性名	column-wrap
値	auto \| nowrap \| wrap
初期値	auto
適用可能要素	マルチカラムコンテナ
継承	継承しない
仕様書	https://drafts.csswg.org/css-multicol-2/#cwr
サポート	https://caniuse.com/mdn-css_properties_column-wrap

説明

column-count で段組みを行う際、高さ制限を超えた場合の挙動を制御します。2026年2月の Chrome 145 でサポートされました。現時点(2026年2月)では、Firefox や Safari は未対応です。

auto: column-height が auto の時は wrap、それ以外の時は nowrap として動作します。
nowrap: height と共に指定した場合、はみ出した列をインライン方向に表示します。
wrap: column-height と共に指定した場合、はみ出した列をブロック方向に表示します。

使用例

CSS

.sample {
  column-count: 3;
  width: 30em;
  border: 1px solid #ccc;
}

HTML

<h3>height:auto; column-wrap:auto</h3>
<div class="sample" style="height:auto; column-wrap:auto">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</div>

<h3>height:5rem; column-wrap:nowrap</h3>
<div class="sample" style="height:5rem; column-wrap:nowrap">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</div>

<h3>height:5rem; column-wrap:wrap</h3>
<div class="sample" style="height:5rem; column-wrap:wrap; margin-bottom:5lh;">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</div>

<h3>column-height:5rem; column-wrap:nowrap</h3>
<div class="sample" style="column-height:5rem; column-wrap:nowrap;">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</div>

<h3>column-height:5rem; column-wrap:wrap</h3>
<div class="sample" style="column-height:5rem; column-wrap:wrap">
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
</div>

表示

height:auto; column-wrap:auto

あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん

height:5rem; column-wrap:nowrap

height:5rem; column-wrap:wrap

column-height:5rem; column-wrap:nowrap

column-height:5rem; column-wrap:wrap

CSS - column-wrap

概要

説明

使用例

関連項目