クエリーループブロックで作成した横並びの一覧。現在、このサイトのトップページもTT3テーマのデフォルトのまま、横3列で表示されるようにしているのですが、1366×768のノートではいい感じになるものの、フルHDでは中身によって段付きが起きる．．これを簡単に解消できる方法のメモページです。
ちなみに以下が施策前にデベロッパーツールで撮ったスクリーンショット。左が1366×768、右が1920×1080の時の表示です。
これを解消しようとする際に使えそうなのがグループブロックの「最小の高さ」設定なのですが、これだと高解像度の場合（1920×1080）にはきれいに表示されても、解像度が小さくなっていくとだんだん各コンテンツの下余白が大きくなってしまうんです。
これは困った．．で検索して訪ね当たったのが以下のページ。
参考：Would love see equal height when Query loop grid layout
やってみたら、なーーんだ、こんなに簡単に？と目からうろこの方法だったので、メモとして公開しておきます。
現在、本サイトのトップページなどで実際にこの手法を使っていますので、デベロッパーツールなどで確認いただけたらと思います。
この方法は、本サイトで使用しているTwenty Twenty-Threeのフォークテーマの場合ですので、クラシックテーマや他のブロックテーマではうまく機能しないかも知れません
一覧に段付きが起きる原因
何事も原因を知って対処することが必要！ということで、クエリーループの一覧で段付きが起きてしまう原因について触れておきます。
手っ取り早く解決したい方は次項まで読み飛ばしてください。
段付きが起きる主たる原因は、クエリーループブロックの仕様ではなく、中のコンテンツの量にバラつきがあるからです。
というのは、クエリーループブロックで横並びにした場合には、CSSのgridレイアウトが適用されて、各行のコンテンツの先頭は同じ高さになるようになっているからです。これは、段付きが起きた次の行を見ると高さが揃っているから目視確認できますね。
で、これを解消するために行う方法が、クエリーループブロック内のコンテンツをグループ化して「最小の高さ」を指定する方法。
以下のように、「投稿テンプレート」の中にある画像やタイトル、抜粋などをグループ化して、スタイル設定から最小の高さを設定することです。
こうすると、今自身で見ている状態ではいい感じに表示できるのですが、別のデバイス（画面解像度）ではうまくいかず段付きが発生します（自身のサイトでデベロッパーツールなどを使って確認してください）。
残念ながら、これ以上の改善をサイトエディター上で行うことはできませんから、以下のような対応が必要になるのです。
画面サイズに左右されずに一覧の高さをいい感じにする方法
サイトエディターの機能のみで指定する方法
下図のようにクエリーループ内に内包しているコンテンツ（アイキャッチ画像やタイトルなど）をグループ化して、そのグループの最小の高さを100%にします。
WordPressのどこかのバージョンから最小の高さに%が使えるようになったのでこの方法で簡単に高さを揃えることができます。
もしも最小の高さに%設定がない時は、以下の方法でうまくいくと思います（少なくともWordPress6.6では上記の方法が使えるので、セキュリティ面などから考えても6.6以降にアップグレードすることをおすすめします）
追加CSSクラスを使用する方法
まずは、下図のようにクエリーループ内のコンテンツである、投稿テンプレート内のアイキャッチ画像～抜粋までをグループ化し、「bloghome-content」という追加CSSクラスを付与します。
続いて有効化しているテーマのstyle.cssへ以下を追加します。
/* クエリーループ内のグループ化コンテンツの高さを揃える */
.bloghome-content {
height:100%;
}すると．．．たったこれだけで、本サイトのトップページのように、どんな画面解像度でも（言い過ぎ．．）いい感じに高さが揃うようになります。
以上、やってみたら簡単だった、クエリーループブロックの各コンテンツの高さをいい感じに揃える方法でした。
