アトリエロワ

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;  //←追加
}

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