新聞や雑誌の記事のようにコンテンツを複数のカラムに分けて、テキストがカラム幅に応じて隣の列に折り返し整列していく段組みレイアウトです。 下記の例は、画面幅を 300px で分割してカラムコンテンツを折り返し表示するように指定しています。カラム列の境目の間隔は 30px で線幅 2px の破線で区切られます。 【CSS 】 #columns { max-width: 1000px; /* 画面幅は%か、最大幅を指定*/ column-width: 300px;/* カラム幅(%値は不可)*/ column-gap: 30px; /* カラムの間隔*/ column-rule: 2px dotted #333; } /* カラム間の区切線(border と同じ書式)*/ 【HTML】 <article id="columns"> <p>カラム・・・・</p> </article> サンプル表示
![新しい CSS レイアウトモジュール](https://cdn-ak-scissors.b.st-hatena.com/image/square/a653ef8d45281fec648157c11a824ca038ca7266/height=288;version=1;width=512/http%3A%2F%2Fwww7b.biglobe.ne.jp%2F~homepage-note%2Fimg%2Fflex-fig-rl-n-wraps.png)