CSS - column-height

概要

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

説明

column-count で段組みを行う際、段組み1段分の高さを指定します。2026年2月の Chrome 145 でサポートされました。現時点(2026年2月)では、Firefox や Safari は未対応です。

auto: 高さを自動調整します。
<length>: 高さを指定します。

使用例

CSS

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

HTML

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

表示

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

CSS - column-height

概要

説明

使用例

関連項目