如何使Bootstrap列具有相同的高度？

<div class="d-flex">
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
</div>

<div class="row">
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
</div>

<script>
$(document).ready(function() {
  var maxHeight = 0;
  $(".col").each(function(){
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();
    }
  });
  $(".col").height(maxHeight);
});
</script>

<div style="display: grid; grid-template-columns: repeat(3, 1fr);">
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
  <div class="col">
    <!-- 内容 -->
  </div>
</div>