Что именно не получается настроить в сетке Bootstrap 5 и какие проблемы возникают?

Для создания элементов в навигационном меню, которые будут отображаться в три колонки на десктопе и занимать всю ширину одним рядом, можно воспользоваться классами Bootstrap Grid System.

Пример:

```html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav mx-auto">
        <div class="row">
          <div class="col-md-4">
            <li class="nav-item">
              <a class="nav-link" href="#">Элемент 1</a>
            </li>
          </div>
          <div class="col-md-4">
            <li class="nav-item">
              <a class="nav-link" href="#">Элемент 2</a>
            </li>
          </div>
          <div class="col-md-4">
            <li class="nav-item">
              <a class="nav-link" href="#">Элемент 3</a>
            </li>
          </div>
        </div>
      </ul>
    </div>
  </div>
</nav>
```

В данном примере мы создаем навигационное меню с помощью классов Bootstrap. Элементы разделены на три колонки с помощью класса `col-md-4`, что означает, что на десктопе они будут занимать по одной трети ширины. Класс `mx-auto` центрирует элементы по горизонтали.

Зачем???????????? 
 НУ ЗАЧЕМ ВЫ ОГРАНИЧИВАЕТЕ СЕБЯ??????????????? 
 
 Нафига привязка к бутстрапу, если на css вам хватит двух-трех строк кода для описания желаемого? 
 
 мобильники - вообще ничего не делаете. Блоки и так уже идут в столбик. 
 
 Дальше простой запрос 
 
 
@media (min-width: 768px) /* ширина по вашему хотению */ {
  .block {  
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .yellow {
    grid-column: span 3;
  }
}