３カラム・２カラムの記事風レイアウト

まずは、『３カラム・２カラムの記事風レイアウト』と言っても、ピンとこない人もいると思いますので、どういったものか表示してみます。

３カラム用レイアウト

このレイアウトでは、画面幅が大きいときは３カラム、画面幅が小さくなっていくにしたがって２カラム、１カラムと変化していくようになっています。
カラムは、記載した文字数の１／３ずつのところで次のカラムに移動してようになっています。
画像が入っていても、動画が入っていても、自然と分割されます。
広い画面のPCなどでは、記事内容が３カラムに分けて表示され、小さいPCやｉＰａｄなどのタブレットでは２カラム、さらにスマホなど画面が小さいデバイスでは、１カラムで表示されるようになっています。

画面の幅が広いときは３カラム

画面の幅が中ぐらいのときは２カラム

画面の幅が狭いときは１カラム

画面の幅によって、３カラム・２カラム・１カラムと記事のレイアウトが自動的に変化していきます。

３カラムの記事風レイアウトのHTML・CSS

３カラムの記事風レイアウトのHTML・CSSについて記載すると次のようになりますので、参考にしてみてください。

３カラムの記事風レイアウトのHTML

<div class="multicol">
【３カラムにして記載する記事内容】
</div>

３カラムの記事風レイアウトのCSS

/* ３カラム */

.multicol { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3;
column-gap: 30px; margin: 1em; padding: 1em 1em;
column-fill: balance;
column-rule: 1px solid #8e5ff1; }
@media (max-width: 1080px) {
.multicol { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
column-gap: 50px; margin: 1em; padding: 1em 1em;
column-fill: balance;
column-rule: 1px solid #8e5ff1; }
}
@media (max-width: 768px) {
.multicol { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}

２カラムの記事風レイアウトのHTML・CSS

ちなみに、同様に２カラムの記事風レイアウトのHTML・CSSについて記載すると次のようになりますので、参考にしてみてください。
２カラムの場合は、画面の幅が広いときは２カラム、狭いときは１カラムになります。

２カラムの記事風レイアウトのHTML

<div class="multicol2">
【２カラムにして記載する記事内容】
</div>

２カラムの記事風レイアウトのCSS

/* ２カラム */

.multicol2 { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2;
column-gap: 30px; margin: 1em; padding: 1em 1em;
column-fill: balance;
column-rule: 1px solid #8e5ff1; }
@media (max-width: 768px) {
.multicol2 { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
}

『ＳＩＲＩＵＳ』の詳細は、コチラ