Как правильно сверстать эти блоки?

Question

[Sennarion]

Добрый день. Вопрос банально простой, тем не менее решений есть много - какой из них верный я не знаю. Есть 6 блоков, между которыми есть border 1 px, снаружи бордеров нету. Как такие блоки правильно верстать, чтобы при адаптиве бордер между блоками сохранялся? Понятно, что можно прописать нужный бордер каждому итему отдельно, а потом в медиа-запросах каждый раз переписывать. Но я думаю, что есть какое-то более универсальное решение, может кто в курсе? https://jsfiddle.net/zkncb8vt/

Comments

[xdevelx]

Для начала предоставьте свою вёрстку с адаптивом без бордеров на codepen, jsfiddle.

[Sennarion]

xdevelx, https://jsfiddle.net/zkncb8vt/

Answer 1

[YavaDev]

Как-то так https://codepen.io/YavaDev/pen/zYNevvE

Comments

[Sennarion]

Спасибо большое! Клёвое решение!

Answer 2

[Александр]

примените ячейкам классы
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>

У них должды быть и отзывчивые варианты.

Comments

[Sennarion]

У бордеров нет отзывчивых вариантов, таких как border-lg-bottom и тд.

[russeljo]

Плохой вариант, если количество блоков в строке будет меняться от ширины области просмотра.

Answer 3

[Pr0grammer]

Просто каждый блок ставьте в колонках.

<div class="col-3">Block1</div>
<div class="col-3">Block2</div>
<div class="col-3">Block3</div>
<div class="col-3">Block4</div>
<div class="col-3">Block5</div>
<div class="col-3">Block6</div>