Idiomatic way to use bootstrap to layout a grid pa

问题:

I am learning to use a utility first css approach to create a grid pattern layout for a variable number of search results. The appearance I want to achieve is described by this image here:

This was my solution using bootstrap css framework.

function loadMore() {
   fetch('search-results.php?current='+document.querySelectorAll('.item').length)
   .then(response=>response.text())
   .then(result=>document.querySelector('.results').innerHTML += result);
}

body,div {padding:0;margin:0;}

.item {
  display:block;
  background:#333;
  color:white;
  border:2px solid white;
}

.item.col-12 {
  height:75vh;
}
.item.col-6 {
  height:50vh;
}
.item.col-4 {
  height:30vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="results"></div>
<button type="button" onClick="loadMore()">Load More</button>

// PHP FILE - search-results.php

<?php
//$n = rand(1,10);
$n = $_REQUEST['current'] < 1 ? 1 : 8;
for($c=0;$c<$n;$c++)
{
  $current = $c+intval($_REQUEST['current']);
  if(
    $current === 0 ||
    ($current-1)%8 === 0 ||
    ($current-3)%8 === 0 ||
    ($current+2)%8 === 0
  )
    echo '<div class="row">';

  if($current === 0)
    echo '<div class="item col-12">'.$current.'</div>';
  else if(($current-1)%8 === 0 || ($current-2)%8 === 0)
    echo '<div class="item col-6">'.$current.'</div>';
  else
    echo '<div class="item col-4">'.$current.'</div>';


  if(
    $current === 0 ||
    ($current-2)%8 === 0 ||
    ($current-2)%8 === 0 ||
    ($current-5)%8 === 0
  )
    echo '</div>';
}

My bootstrap approach has several problems that I do not know how to resolve:

1. When search-results.php returns a random number of items, the opening and closing <div class="row"> tags are not inserted at the right times after multiple "Load More" button clicks.

2. I don't like the arithmatic that I have to perform to properly place the open and closee <div class="row"> tags and to decide whether to write a col-12 || col-6 || col-4. This all seems unnecessarily complex.

QUESTION : What is the idiomatic way to use bootstrap (or any other utility-first css approach) to write a pattern grid layout that receives random number of results?

EXTRA - PLAIN APPROACH

My problem above can be solved using a plain CSS approach as shown with this code here:

// CSS FILE

body,div {padding:0;margin:0;}
.results {
  display:flex;
  flex-wrap:wrap;
}
.item {
  display:block;
  background:#333;
  color:white;

  box-sizing:border-box;
  padding:10px;
  width:33.333%;
  height:30vh;
  border:2px solid white;
}
.item:nth-child(1) {
  width:100%;
  height:75vh;
}
.item:nth-child(8n+2),
.item:nth-child(8n+3) {
  width: 50%;
  height:50vh;
}

// PHP FILE

<?php
$n = rand(1,10);
for($c=0;$c<$n;$c++)
  echo '<div class="item">'.($c+intval($_REQUEST['current'])).'</div>';

The PHP code is much simpler and I do not have to deal with wrapping <div> elements.