下のような画像とテキストの2カラムのコンテンツで、画像が画面端まで、テキストは固定幅(もしくはコンテンツインナーの幅)になっているようなレイアウトをブロック再現してみようと思います。
実装方法
①カラムブロックを 50/50 で配置し、画像とテキストをそれぞれのカラムに入力します
②テキストはグループブロックでラップしておきます。
③カラムブロックの幅を「全幅」にします。
④テキストをラップしたグループブロックにテキストの最大幅を設定し、配置を左寄せにします。
⑤カラムブロックの横方向のブロックの間隔を「なし」(0)にします。
⑥テキストをラップしたグループブロックの水平方向のパディングを設定します。(コンテンツ幅と揃うようにするときれいかも)
以上の操作をすることで、以下のようなレイアウトが完成です。(上記の手順はどの順番で操作しても問題ありません)
⑤〜⑥でカラムブロックの間隔を0にして、テキストのグループにパディングを設定しているのは、モバイルで縦積みになったときに画面端にテキストがくっついてしまうのを防止するためです。
まとめ
以前、案件で対応したときにがっつりCSSを書いて対応したのですが、今ならブロックだけでできるのでは?と思いついてやってみました。
コーポレートサイトなどでよく見かけるレイアウトなので使い道はありそうかなと思います。
余白や間隔の値や付け方はテーマによって異なるので、同じようにできないテーマもあることは注意が必要です。
(この記事での手順の画面はTwenty Twenty-Fourのものを使用しています)