Как правильно сверстать эти блоки?
Как-то так https://codepen.io/YavaDev/pen/zYNevvE
примените ячейкам классы
https://getbootstrap.com/docs/5.0/utilities/borders/
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
У них должды быть и отзывчивые варианты.