横並びブロック アンド グループ

横並びブロックのレスポンシブ対応のチェック。

段落

段落

段落

段落

段落

段落

ブロックに背景を付けると、1.25, 2.375emのパディグが付く。basisなどの指定なし。
nowrapのため、数が増えると、レイアウトが崩れる。

段落2つを単にグループ化

段落

横並びの方がシンプルに枠一つで囲むだけ、グループの方は枠に中に更にインナーがあり、モア形式一覧では縦並びだが、シングル表示では横に並んでいる。スタイルはグリッドになっているようだ。

横並びの中に、縦並びをいれるしか無いかも。

段落1

段落2

段落3

段落4

1,2 及び 3,4 を縦並びにし、両者を横並びにしたもの。枠はシンプルに縦並び用と横並び用の2つだけ。

段落

段落

段落

段落

段落

段落

段落

段落

段落

配置を「項目の間隔」(意味不明)にし、「複数行に折り返す」にするとエディタ上では9個目、フロント画面では7個目から2行目に。

個々のブロックのflexは初期値の0 1 autoらしい。ギャップが、0.5emになると、右から順に次の行に行く。importantしているわでも無いので、flexの追加指定で、使えるようになるかも知れないが、2行目を左寄せにしたり、ブロック幅を同じにするならグリッドの方が良いかも知れない。下のサンプルは、この下に、カスタムHTMLでスタイルを指定してある。エディタ上ではスタイルは効いていない。外部CSS+クラス指定が必要と思える。

.wp-block-group__inner-container{ display:grid;gap:1em; grid-template-columns: repeat(auto-fill, 10em);color:red; }

段落

段落

段落

段落

掲載日時: 2022年6月1日(水) 13:01