レイアウト
column-span
column-span は、段組みの中の要素を、すべての段にまたがって横いっぱいに置くかどうかを指定します。
構文
none | allプレビュー
The quick brown fox jumps over the lazy dog.Heading 見出し素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box {
column-count: 2;
}
.box > :nth-child(2) {
column-span: all;
}コントロール
column-spanall
The quick brown fox jumps over the lazy dog.Heading 見出し素早い茶色の狐がのろまな犬を飛び越える。
解説
値の意味
none：初期値です。ほかの中身と同じように、1 つの段の中に置かれます。all：すべての段にまたがって置かれます。前の中身はその上で、段の高さがそろうように分けられ、後ろの中身はその下で新しく段組みを始めます。
使いどころ
段組みにした記事の途中に、横いっぱいの見出しや図を入れるときに使います。見出しの前の文章は、column-fill: auto を書いていても段の高さをそろえて分けられます。
気をつけること
- 書くのは段組みの箱（
column-countやcolumn-widthを書いた要素）ではなく、その中のブロックの要素です。インラインの要素や、float・position: absoluteの要素には効きません。 - 孫より深い要素にも効きますが、段組みの箱との間に、新しいブロック整形文脈を作る要素（
display: flow-rootなど）や、transformを書いた要素があると、またがりません。 column-span: 2のような段の数やautoは CSS Multi-column Layout Level 2 の草案にありますが、対応しているブラウザはまだありません。
このページのプレビューでは、補助の宣言で箱を 2 段にしています（column-count: 2）。書いた値は黄色い見出し（2 番目の子）に効き、all では見出しが横いっぱいに広がって、前の英文は見出しの上で 2 段に分かれます。