columnsレイアウトの特徴は、コラムの分量にかかわらず適切な配分で段組みを構築してくれることです。
例えば、3コラムの文章を作成する場合それぞれの文字量を同等な分量にしないと綺麗な3コラムにならないものです。
ところがcolumnsプロパティを使うと、それぞれの段落の分量の大小にかかわらず均一な3コラムにしてくれます。
もう一つはコラム数を指定する必要がなく一つのコラムの横幅を設定するだけであとは自動でコラム数を調整してくれます。
つまり、文章の段落が4つだろうといくつであっても関係なく3コラムなり2コラムなりにしてくれます。
かなり自由な指定方法が可能で、おおきく二つの方法があります。
一つはコラム数を指定する方法ですが、これだとスマホなどの場合文字数が少なくなりすぎるのであまり現実的ではないかもしれません。
もうひとつは先に説明しました、段落の横幅を指定する方法で、こちらだとレスポンシブにコラムレイアウトが可能です。
Columnsレイアウトの場合、各段落の間隔は自動で適切なサイズになります。font-sizeを変更すると比例して変化しますので、感覚的には一文字分かなと思います。
とはいううものの、段落間隔も当然自由に指定できます。
column-gapで間隔を指定します。marginなどで指定するより効率よく設定できるので、自動でできる間隔が気に入らない場合は、こちらを使うべきでしょう。
これまで段組みはかなり苦労しました。特にレスポンシブとPCではdisplay: flexのflex-flowで'row wrap'と'column'で個別に指定したりと何かと手間でした。
しかし、このcolumnsだと一個の指定でスマホ、PC両方指定できます。
min(),max(),clamp()などと併用すればホントにmediaqueryは不要になります。
ただひとつ気になる点といえばColumnsレイアウトの特徴でもあるのですが、横幅によっては小見出しが段落の一番下になり、本文が次の段落へ送られるなど改行したくない箇所で改行されるケースもあるという点です。
これもDTPのように分割禁止などのオプションプロパティがあるともう完璧なのですが、まあそのうち準備されるかもしれませんね。
ちなみにgridレイアウトは下のブロックに設定しています。
grid-template-areasで3ｘ2の段組みを設定し、grid-template-columnsで各段落の割合を設定しセンターになるようにしています。
まあ、左右センターはmargin:0 autoでも同じなんですが…。
