bootstrap grid yapısı için flex özelliğini kullanıyor, yani display: flex olarak ayarlıyor kapsayıcı etiketini içindeki elemanlarıda ona göre içindeki 12lik grid sistemine göre col-x ile ayarlayıp gösterebiliyorsun.

css'in grid yapısında ise display: grid diyorsun ve örneğin 12'lik bir grid sistemi kuracaksan grid-template-columns: repeat(12, 1fr) diyerek 12'lik grid sistemini kolayca oluşturuyorsun.

Örneğin 12'lik bir grid kapsayıcısı oluşturalım.

.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: 10px;
}

her bir kolon için kapsayacağı ayarlamaları yapalım.

.col {
	background: #ddd;
}
.col-2 {
	grid-column: span 2;
}
.col-3 {
	grid-column: span 3;
}
.col-4 {
	grid-column: span 4;
}
.col-5 {
	grid-column: span 5;
}
.col-6 {
	grid-column: span 6;
}
.col-7 {
	grid-column: span 7;
}
.col-8 {
	grid-column: span 8;
}
.col-9 {
	grid-column: span 9;
}
.col-10 {
	grid-column: span 10;
}
.col-11 {
	grid-column: span 11;
}
.col-12 {
	grid-column: span 12;
}

html'de şöyle olsun

<div class="grid">
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col">col-1</div>
    <div class="col col-8">col-8</div>
    <div class="col col-2">col-2</div>
    <div class="col">col-1</div>
    <div class="col col-4">col-4</div>
    <div class="col col-3">col-3</div>
    <div class="col col-2">col-2</div>
</div>

sonuç: https://codepen.io/tayfunerbilen/pen/yLXOZNa