grid-areaはbootstrapと共用できない？

bootstrapでグリッドレイアウトを共用してレイアウト作成を行っています
その際にgrid-areaを使うとgrid-row-columnではうまく動いていたものが動かなくなってしまいます

どうすればbootstrapを使ったままgrid-areaを使えますか？

<div class="container">>
  <div class="row">
    <div class="gridcontainer">
      <span class="plot"></span>
      <span class="plot"></span>
      <span class="plot"></span>
      <span class="plot"></span>
      <span class="plot"></span>
    </div>
  </div>
</div>

うまく動く


.row {
  width: 100%;
}

.gridcontainer {
  
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  
  grid-gap: 10px;
  height: 50vh;display: grid;
 width: 100%;
}

.plot {
  background-color: blue;
}

.plot:first-of-type {
  grid-row: 1 / 5;
  grid-column: 2 / 4;
}

動かないバージョン

.row {
  width: 100%;
}

.gridcontainer {
  
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
  
  grid-gap: 10px;
  height: 50vh;display: grid;
 width: 100%;
}

.plot {
  background-color: blue;
}

.plot:first-of-type {
  grid-area: 1 / 5 / 2 / 4;
}

s8_chu

2019/04/20 23:19

質問者さんの使用している Bootstrap のバージョンを教えていただけませんか？

bFBPYieAia

2019/04/20 23:22

ご回答ありがとうございます。4.1.3を使用しております。

行動規範の内容に同意します

回答1件

ベストアンサー

grid-areaプロパティに指定する値の順序が、質問文の正常に動作しているコードと異なるためです。以下のように CSS を修正することで、質問者さんの実現したいことが行えると思います(動作確認用リンク)。

CSS
1.row {
2  width: 100%;
3}
4
5.gridcontainer {
6  display: grid;
7  width: 100%;
8  height: 50vh;
9  grid-template: repeat(5, 20%) / repeat(5, 20%);
10  grid-gap: 10px;
11}
12
13.plot {
14  background-color: blue;
15}
16
17.plot:first-of-type {
18  grid-area: 1 / 2 / 5 / 4; /* 修正 */
19}