bootstrapのgridでレイアウトを崩さず余白を付ける方法が知りたい

Question

現在デザイン・コーディングについて学んでいます。
レイアウトを設定するためにbootstrapのgridを勉強しているのですが、どのようにすれば横並び３つのレイアウトを崩さず余白を付けることができるのでしょうか？

marginとwidth合わせて合計100%以下で設定しても以下のように３つ目が下にずれ込んでしまいます

codePen
↑こちらにコードあります

調べてみると、そもそもrowクラスなどbootstrapで指定したものが、余白を設定されているのでそれにより合計が幅100%以上になっていそうですが、
解決策を調べてみてもどれもなかなか複雑で、余白をつけるだけでこんなに難解なのか。と思ってしまいます。

一旦display:grid で対応していますが、この詰まってしまったところは解決したいです。

できれば比較的簡単な方法で、余白をつけてもレイアウトが崩れない方法を知りたいのですが、わかる方いらっしゃいますでしょうか？
アドバイスいただければ幸いです。

Comments

[Lhankor_Mhy]

複雑な解決方法を例示していただけますか？

Answer 1

.row には flex が設定されているため、 grid プロパティと flex プロパティを用いて次のようにすることで、質問者さんの実現したい動作が行えると思います (動作確認用リンク)。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
  <div class="row">
    <div style="width: 100%; height: 10vh; background-color: pink;"></div>
  </div>
  <div class="row">
    <div class="bg col-4">
    </div>
    <div class="bg col-4">
    </div>
    <div class="bg col-4">
    </div>
  </div>
</div>

.row {
  gap: 1%;
}

div.bg {
  background-color: aqua;
  height: 10vh;
  flex: 1;
  width: 32%;
}