column-count
column-count は CSS のプロパティで、指定された段数で要素の内容物を分割します。
試してみましょう
構文
/* キーワード値 */
column-count: auto;
/* <integer> 値 */
column-count: 3;
/* グローバル値 */
column-count: inherit;
column-count: initial;
column-count: revert;
column-count: unset;
値
auto-
段数は
column-widthなど、他の CSS プロパティによって決定されます。 <integer>-
正の
整数のみで、要素の中で流れる理想的な列の数を記述します。column-widthがauto以外の値で一緒に設定された場合は、最大の列数を示します。
公式定義
形式文法
例
段落を 3 つの段に分割
HTML
<p class="content-box">
これは、 3 つの段に分割されたテキストの束です。
CSS の `column-count` プロパティを使用しています。
テキストはそれぞれの段に均等に配置されています。
</p>
CSS
.content-box {
column-count: 3;
}
結果
仕様書
| Specification |
|---|
| CSS Multi-column Layout Module Level 2 # cc |
ブラウザーの互換性
BCD tables only load in the browser