ふとした時に何かと使える『matchHeight.js』をまとめます。
display:flex;で高さを揃えるほうが手っ取り早いのですが、、、flexではできないときなどに使っていきましょう！
『matchHeight.js』のダウンロード
GitHubでダウンロードする場合はこちら
ダウンロードはこちら（GitHub – jquery-match-height）
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="js/jquery.matchHeight.js"></script>もしくはCDNを使う場合は下のコードをhead内に貼り付けてください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script>最新のCDNはこちらでご確認ください（CDN – jquery.matchHeight）
実際に導入してみる
See the Pen matchHeight.js by Yushi nakagaki (@YUSHI-NAKAGAKI) on CodePen.
該当コード
$(function() {
$('.contents').matchHeight();
});ここの部分のみになります。.contentsをもっている要素の中一番高さのあるものに合わせる感じです。
まとめ
横並びの要素で偶数奇数で高さを合わせたりいろいろできます。
コーディングをしていて、たまーに使う機会があるので頭の片隅にこんなのあったな、と覚えておけば便利かもしれません。
