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; }
回答1件
あなたの回答
tips
プレビュー