web担しているサイトが、Bootstrap3(以下B3)なもので個人的に今Bootstrap5をお勉強しているMacoです。B3グリッドシステムは使わせていただいております。が、もう少し余白はこうしたい、なんでこうしたときにpaddingがこんなに空くかなぁなどちょいちょいcssで個別に修正したりしてておりました。
Bootstrap5のグリッドシステムは、Flexboxになっているらしいのです。(それはBootstrap4かららしい)そして12分割の数を毎度書かなくてもrowの中にいくつcolを書いてるかで勝手に分割してくれるそうです。長さの割合を増やしたいところだけ書けばあとは自動で分割してくれるそうです。5からは余白も変更できるとか。それはおいおい見ていくとして、とりあえずは基本から。
グリッドシステムは、12 カラムのシステムと 5 段階のレスポンシブ、Sass と mixin、いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能
https://v5.getbootstrap.jp/docs/5.0/layout/grid/#row-columns
例えばこんなことです

rowの中に3つcolを書いたら4分割
rowの中に4つcolを書いたら3分割
<div class="container">
<div class="row">
<div class="col">
rowの中のcol①
</div>
<div class="col">
rowの中のcol②
</div>
</div>
<div class="row">
<div class="col">
rowの中のcol①
</div>
<div class="col">
rowの中のcol②
</div>
<div class="col">
rowの中のcol③
</div>
</div>
<div class="row">
<div class="col">
rowの中のcol①
</div>
<div class="col">
rowの中のcol②
</div>
<div class="col">
rowの中のcol③
</div>
<div class="col">
rowの中のcol④
</div>
</div>
</div>いろんなことができるようになっているかと思うがまだまだお勉強が追いつきません。お仕事になって実践しながら慣れるのが一番必死にがんばれるんだけどなぁと思いつつ。日々の業務はB3でです(涙)
他にもこちらはこれまでと同様、12分の6の指定だと
<div class="col-6">
とか、
自動で内容によって幅変えたいときは、以下のようにautoつけたり
※以下は、ブラウザ幅がmd(≥768px)の場合
<div class="col-md-auto">
Variable width content
</div>
いろいろ細かく設定ができるみたい。
次はflexbooxになったからならではの
水平方向に整列や、垂直方向に整列、などお勉強してみたいと思います。