CSS columnsプロバティ
ブロックエディタには、カラムズ、横並びなどレイアウトに使えるものがあるが、なぜか、CSSのcolumnsプロパティを使えるものが無い。単にカラムを別けてコンテンツを整理するだけなら、最も楽そうなのになぜだろう。複数行にまたがるレイアウトならグリッドが使い易いが、横一列ににしたいだけなら、カラムズプロパティが最も適しているように思うのだが。
段落を作成して、グループに入れてみる。グループに「columns300」というクラス名を付与する。この上にカスタムHTMLブロックを挿入して、columns300 に、 column-width:300px; というスタイルを指定してみる。column-gap:1.5em;text-align:justify;も指定。エディタ上ではカラムに別れないが、フロント画面では２列に別れて表示されている。次は、この先頭に画像を入れてみるが、絵データ上で２列に別れてくれないのは少し不便な感じがする。
スタイル指定をカスタムHTMLブロックから、外部スタイルシートに移してみたら、エディタ上でも２列に別れた。検証ツールを立ち上げてリロードしたので、キャッシュの問題だけだったのかも知れない。
エディタ上とフロント画面では、コンテンツ表示エリアの幅が同じになっていない分、多少の違いがでるものの特に問題はないように思える。
やはり、単に２列にするだけならこの方法が一番なようだ。ビューポート幅により、あまり画像を大きくしたくないなら、３列に表示されつときがあるものの、250pxがベストかも知れない。