アトリエロワ

css gridの中のdivの中のdivの高さを合わせる

css gridの中のdivの中のdivの高さを合わせる

html

gridを設定したdiv > divの中にさらにdivを入れて背景色や枠を付けた時に、高さを揃える方法

<div class="grid_fr">
<div class="grid_fr_in"><div>この高さを同じにする</div></div>
<div class="grid_fr_in"><div>この高さを同じにする<br>この高さを同じにする</div></div>
<div class="grid_fr_in"><div>この高さを同じにする<br>この高さを同じにする<br>この高さを同じにする</div></div>
</div>

css

.grid_fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;　//横に3つずつ並べたい時
}
.grid_fr_in {
  display: flex;
  flex-wrap: wrap;
}
.grid_fr_in > div {
    background-color: #22ac38;　//高さを見るために色を付けただけなので無くて良い
}

gridカラムの間隔

.grid_fr {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
 grid-gap: 58px;　　//←追加
}

内側に複数divがある時

.price-view-in　の高さを合わせたい
HTML

<div class="price-view">
  <div>
      <div></div>
      <div class="price-view-in"></div>
  </div>
  <div>
      <div></div>
      <div class="price-view-in"></div>
  </div>
  <div>
      <div></div>
      <div class="price-view-in"></div>
    </div>
</div>

css

.price-view {
  display: grid;
  gap: 3%;
  grid-template-columns: 1fr 1fr 1fr;
}

.price-view >div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.price-view-in {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* 無くても可 */
  align-items: stretch; /* 無くても可 */
  height: 100%; /* 親要素の高さに合わせる */
}

HOME > html+css > css gridの中のdivの中のdivの高さを合わせる

html+css

html+css

+ More