横並びにしたコンテンツを内包したボックスをさらに横並びにし、高さを揃えたい

Question

現在横並びのレイアウトを制作しているのですが、どうしてもうまくいかないので質問させてください。

一つの項目自体は画像と商品名の組み合わせなのですが、そこに見出しも絡んでくるため、flexによる横並びを2段階で使用しています。

文字で説明するのが難しいので画像を載せます。

■PC時のレイアウト

■PC時、商品名の長さが2行になるものがあるパターン

■SP時のレイアウト

まず3つのブロックを横並び、各赤線の中でも横並びにしています。

HTML、cssは下記のようになっています。

HTML

<div class="contents">
    <div class="box col01">
      <p class="head">見出し</p>
      <ul class="list">
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="box col04">
      <p class="head">見出し</p>
      <ul class="list">
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="box col01">
      <p class="head">見出し</p>
      <ul class="list">
        <li>
          <div>
            <p class="image"><img src="image.jpg" alt=""></p>
            <p class="link"><a href="#">商品名</a></p>
          </div>
        </li>
      </ul>
    </div>
</div>

CSS

.contents {
	display: flex;
	justify-content: space-between;
}

.box {
	display: flex;
	flex-direction: column;
}

.box.col01 {
	width: 17%;
	max-width: 220px;
}

.box.col04 {
	width: 66%;
}

.box.col04 li {
	width: 25%;
}

.list {
	display: flex;
	justify-content: space-between;
}

.list li {
	max-width: 220px;
	display: flex;
	flex-direction: column;
}

.list li div {
	display: flex;
	flex-direction: column;
}

.head {
	padding: 14px 0 7px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	background-color: #E8EBF0;
	border-bottom: 15px solid #FFF;
	font-family: "ヒラギノ角ゴ W6 JIS2004";
	white-space: nowrap;
}

.link {
	padding: 18px 0 16px;
	color: #fff;
	font-size: 2rem;
	background-color: #1D3366;
	line-height: 1.5;
	font-weight: bold;
}

.link a {
	display: block;
	color: #fff;
	text-align: center;
	padding: 0 5px;
}

できればそれぞれの隙間は同じサイズになると嬉しいのですがなかなかうまくいかず…
flex以外でも大丈夫なので、何かいい方法がありましたら教えていただけますとありがたいです。

Comments

[Lhankor_Mhy]

各 .col00 下の商品の数は固定ですか？

たぶん、subgrid で実装できると思うのですが、対応しているブラウザが少ないです。

[recal]

プラグインを使ってしまうとか
【JS】matchHeight.jsで横並びの要素の高さを揃えよう | ウェブラボ関西オフィス [大阪/梅田] https://kansai.weblab.co.jp/blog/tech/css-matchheight/

[saku615]

Lhankor_Mhy様
.col01なら商品数は1、.col04なら4つになります。
1列の商品数は6で固定です。

recal様
やはりjsですかね…

[Lhankor_Mhy]

繰り返しになってすみませんが、subgrid で実現可能であるかと思います。
https://qiita.com/oreo/items/5301dcb1128f20cc7d97

現状のところ、実装が終わっているのは Firefox のみ、Chrome は "In development"、Safari は 16から実装予定となっており、おそらく来年ぐらいには普通に書けるようになるかと思いますが、現状では対応ブラウザに問題があります。

[recal]

subgrid魅力的ですね

[saku615]

結局今回は各ページごとに決まった行数でずれが出ないように文言を調整することにしました。
subgridいいですね…！
各ブラウザに実装されるのを待とうと思います！

Answer 1

間に合わなかったようですみません。

一応、サンプルを置いておきます。
https://jsfiddle.net/Lhankor_Mhy/jnr2cgv5/

		.contents {
			display: grid;
			grid: auto auto auto / repeat(6, 1fr);
			grid-auto-flow: column;
			gap: 5px;
		}

		.box {
			display: contents;
		}

		.head {
			background: turquoise;
		}

		.image {}

		.image img {
			width: 100%;
		}

		.link {
			background: olive;
		}

		.col04 .head {
			grid-column: span 4;
		}

		.list,
		.list>li,
		.list>li>div {
			display: contents;
		}

		@media screen and (max-width:576px) {
			.contents {
				display: grid;
				grid: auto-flow / auto;
				grid-auto-flow: row;
				gap: 15px;
			}

			.box {
				display: grid;
				grid: auto auto auto / 1fr 1fr;
				grid-auto-flow: column;
				gap: 5px;
			}

			.head {}

			.image {}

			.image img {
				width: 100%;
			}

			.link {}

			.col04.box {
				grid: repeat(5, auto) / 1fr 1fr;
				grid-auto-flow: column;
			}

			.col04 .head {
				grid-column: span 2;
			}
		}

Comments

[saku615]

Lhankor_Mhy様

とんでもないです！
ありがとうございます、試してみます！

Answer 2

今回は各ページごとに決まった行数でずれが出ないように文言を調整することにしました。