Как с помощью bootstrap 5 выводить блоки разного размера с общим контейнером?

Question

[DocTypeMaster]

Друзья, возникла нужна выводить из базы посты в следующем виде

Возможно вопрос конечно и не с теми тегами я задаю , но все же может кто делал вывод из базы такого вида, у меня из инструментов bootstrap 5 и vue js

Comments

[ForSureN1]

А в чем проблема верхним блокам дать по 49% ширины, а нижним по 33%? Или я не правильно вопрос понял

[DocTypeMaster]

Евгений Бабенко, когда делаешь вывод из базы то ты делаешь перебор циклом по одному шаблону, это нужно как-то кастомно делать, у меня мысль такая что делать 2 цикла в одном выводить первые 2 места а во втором остальное

[iBird Rose]

DocTypeMaster, а в чем проблема то? делаешь v-for на уровне .col классов бутстрапа. и для первых двух условно пишешь .col-lg-6, а для остальных .col-lg-4

[DocTypeMaster]

iBird Rose,
Пример:

<div v-for="пост in постс" >
   <div class="col-lg-6">
      пост .тайтл
   </div>
</div>
<div v-for="пост in постс" >
   <div class="col-lg-4">
       пост .тайтл
   </div>
</div>

Вы имели в виду именно 2 перебора делать ? или как ? просто не очень понятно, если в теле , будет 2 блока с разными колами то оно и продублирует их вместе

[Антон]

DocTypeMaster,

когда делаешь вывод из базы то ты делаешь перебор циклом по одному шаблону

А условия вам зачем? Вы с тем же успехом можете 1000 и 1 способом уловить нужные итерации и разным диапазонам выдать разный вывод

[iBird Rose]

DocTypeMaster, зачем? тебе нужен один v-for. а в зависимости от того же index - меняй класс этого дива который рисуется

[DocTypeMaster]

iBird Rose, простите но вообще не понятно, какого индекса ? Мне после того как оно переберет посты и выведет их указывать как-то классы другие или как это ?

<div v-for="пост in постс" >
   <div class="col-lg-6">
      пост .тайтл
   </div>
</div>

после отработки цикла я получу одинаковые посты

<div class="col-lg-6">
      пост .тайтл1
   </div>
   <div class="col-lg-6">
      пост .тайтл2
   </div>
   <div class="col-lg-6">
      пост .тайтл3
   </div>

[iBird Rose]

DocTypeMaster, Сергей delphinpro тебе показал

Answer 1

[Сергей delphinpro]

Comments

[DocTypeMaster]

спасибо

Answer 2

[zombtron]

А чистый css чем не угодил?

div:nth-child(5n+1), div:nth-child(5n+2) {
    width: 49%;
    display: inline-block;
}
div:nth-child(5n+3), div:nth-child(5n+4), div:nth-child(5n+5) {
    width: 33%;
    display: inline-block;
}

И никаких левых библиотек, никаких извратов с хтмл.

Comments

[DocTypeMaster]

Ну я использую и так вью в проекте, и бутстрап, а в вашем примере тут самому нужно делать по процентам а мне это не нужно так как есть сетка

[zombtron]

DocTypeMaster,
Только через вью и бутстрап это через пару десятков строк делается и тоже самому руками, а тут всего 6 (а если подумать, то еще более компактно записать можно).