グリッド高さを揃える

2021-07-01

高さを揃える

下のような状態のときに要素の高さを揃えます。

col-6
テキストの量が違うので高さが揃いません。
テキストの量が違うので高さが揃いません。

col-6

例1 高さを合わせたい要素を高さ100%にする

高さを合わせたい要素に「.h-100」とつけます。
「.h-100」はbootstrap4に搭載されている高さを100%にするクラスです。
このとき、col直下の子要素は1つだけである必要があります。

col-6
テキストの量が違うので高さが揃いません。
テキストの量が違うので高さが揃いません。

col-6

<div class="row m10-bottom">
	<div class="col-6">
		<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>テキストの量が違うので高さが揃いません。</div></div>
	<div class="col-6">
		<div class="h-100" style="background-color: #8ED6F9;">col-6</div>
	</div>
</div>

<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>テキストの量が違うので高さが揃いません。</div></div>

</div>

この方法を使うとき、pタグなど、上か下にmarginを指定しているタグ・クラスだとmarginの分うまくいきません。
また、自分が打ったコードにpタグが入っていなくても、WordPress側が勝手にpタグを入れてしまう場合があります。

col-6
テキストの量が違うので高さが揃いません。
pタグを使った失敗例。

col-6

<div class="row m10-bottom">
	<div class="col-6">
		<p class="gray-box">col-6<br>テキストの量が違うので高さが揃いません。<br>pタグを使った失敗例。</p>
	</div>
	<div class="col-6">
		<p class="Blue-box h-100">col-6</p>
	</div>
</div>

<p class="gray-box">col-6<br>テキストの量が違うので高さが揃いません。<br>pタグを使った失敗例。</p>

</div>

</div>

col直下の子要素が複数あると失敗します。
高さ100%は親要素の高さを基準にするためです。

col-6
テキストの量が違うので高さが揃いません。
col直下の子要素が複数あります。
失敗します。

col-6

<div class="row m10-bottom">
	<div class="col-6">
		<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>col直下の子要素が複数あります。<br>失敗します。</div></div>
	<div class="col-6">
		<div class="h-100" style="background-color: #8ED6F9;">col-6</div>
		<div style="background-color: #eee;">col-6</div>
	</div>
</div>

<div style="background-color: #eee;">col-6<br>テキストの量が違うので高さが揃いません。<br>col直下の子要素が複数あります。<br>失敗します。</div></div>

</div>

例2 両方のcolをflex-boxにしてdirectionをcolumn、高さをあわせたい方のcol直下の要素に「flex-grow-1」

col-6
テキストの量が違うので高さが揃いません。
「d-flex」はbootstrap4に搭載されていて、要素をdisplay:flexにします。
「flex-column」もbootstrap4に搭載、要素をflex-direction:columnにします。
テキストの量が違うので高さが揃いません。

col-6

「flex-grow-1」もbootstrap4に搭載、要素をflex-grow:1にします。

<div class="row">
	<div class="col-6 d-flex flex-column">
		<p class="gray-box">col-6<br>テキストの量が違うので高さが揃いません。<br>「d-flex」はbootstrap4に搭載されていて、要素をdisplay:flexにします。<br>「flex-column」もbootstrap4に搭載、要素をflex-direction:columnにします。<br>テキストの量が違うので高さが揃いません。</p>
	</div>
	<div class="col-6 d-flex flex-column">
		<p class="Blue-box flex-grow-1">col-6</p>
		<p class="gray-box">「flex-grow-1」もbootstrap4に搭載、要素をflex-grow:1にします。</p>
	</div>
</div>

<p class="gray-box">col-6<br>テキストの量が違うので高さが揃いません。<br>「d-flex」はbootstrap4に搭載されていて、要素をdisplay:flexにします。<br>「flex-column」もbootstrap4に搭載、要素をflex-direction:columnにします。<br>テキストの量が違うので高さが揃いません。</p>

</div>

<p class="gray-box">「flex-grow-1」もbootstrap4に搭載、要素をflex-grow:1にします。</p>

</div>

グリッド表示順変更

グリッド 高さを揃える

高さを揃える

例1 高さを合わせたい要素を高さ100%にする

例2 両方のcolをflex-boxにしてdirectionをcolumn、高さをあわせたい方のcol直下の要素に「flex-grow-1」

関連記事

グリッド高さを揃える