グリッドシステム

標準のグリッドシステム .row .g-4

.col-2

.col-6

.col-4

.col-auto

.col

<div class="row g-4">
	<div class="col-2">.col-2</div>
	<div class="col-6">.col-6</div>
	<div class="col-4">.col-4</div>
	<div class="col-auto">.col-auto</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>

CSSグリッド .grid

.g-col-2

.g-col-6

.g-col-4

.g-col-3

<div class="grid">
	<div class="g-col-2">.g-col-2</div>
	<div class="g-col-6">.g-col-6</div>
	<div class="g-col-4">.g-col-4</div>
	<div class="g-col-3">.g-col-3</div>
	<div class="g-col-3">.g-col-3</div>
	<div class="g-col-3">.g-col-3</div>
	<div class="g-col-3">.g-col-3</div>
</div>

CSSグリッド .g-colなし

自動

<div class="grid" style="--bs-gap: 0;">
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
	<div>自動</div>
</div>

CSSグリッド 10列

.g-col-7

.g-col-3

.g-col-2

<div class="grid" style="--bs-columns: 10; --bs-gap: 0.5rem;">
	<div class="g-col-7">.g-col-7</div>
	<div class="g-col-3">.g-col-3</div>
	<div class="g-col-2">.g-col-2</div>
	<div class="g-col-2">.g-col-2</div>
	<div class="g-col-2">.g-col-2</div>
	<div class="g-col-2">.g-col-2</div>
	<div class="g-col-2">.g-col-2</div>
</div>

CSSグリッド 3行3列

自動

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
	<div>自動</div>
	<div class="g-start-2" style="grid-row: 2;">自動</div>
	<div class="g-start-3" style="grid-row: 3;">自動</div>
</div>