Bootstrap: автоматически настраиваемая сетка с различными размерами элементов?

Question

Я работаю над проектом, который должен отображать элементы по сетке из 4 столбцов.

Как это:

Итак, я поставил col-3 класс своим предметам.

Но некоторые элементы важны, поэтому мне нужно отобразить их с двойной шириной и высотой.

Итак, я изменил этот класс предметов на col-6.

Теперь это выглядит так:

Вместо этого я могу использовать таблицу, но она не подходит для СМИ ...

Есть ли способ сделать так, чтобы это не мешало структуре div?

Answer 1

Я бы использовал систему сетки, чтобы сохранить вашу фактическую структуру, которая еще не реализована в boostrap.

см. Для получения дополнительной информации: https://css -tricks.com / snippets / css / complete-guide-grid / http://gridbyexample.com/

Не забывайте и о поддержке https://caniuse.com/#search=grid

Идея состоит в том, чтобы установить сетку из 4 столбцов и сделать некоторые из ваших элементов охватывающими 2 столбца и 2 строки. CSS для использования в качестве дочернего элемента сетки:

grid-row:auto /span 2;
grid-column:auto / span 2;

демоверсия, вторая или третья & fith

section {
  float: left;
  border:solid;
  width: 40%;
  margin: 0.5em;
  display: grid;
  grid-template-columns: repeat(4, 1fr);  
  
  grid-template-rows:repeat(4, 1fr);
  grid-auto-flow: dense;
  grid-gap: 0.5em;
  padding: 0.5em;
  counter-reset: divs
}

div {
  background: teal;
  counter-increment: divs;
  min-height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5vw;
  color: white;
}

div:before {
  content: counter(divs)
}

section:first-of-type div:nth-child(2) {
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}

section+section div:nth-child(3),
section+section div:nth-child(5){
  grid-row: auto /span 2;
  grid-column: auto / span 2;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>
<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

или пролетать через сетку при наведении только при наведении:

section {
  width:40%;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-gap:0.5em;
  padding:0.5em;
  counter-reset:divs
}
div {
  background:teal;
  counter-increment:divs;
  min-height:10vw;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:5vw;
  color:white;
}
div:before {
  content:counter(divs)
}
div:hover{
  grid-row:auto /span 2;
  grid-column:auto / span 2;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</section>

Answer 2

Это можно сделать, вложив сетку начальной загрузки.

<div class="container">
<div class="row text-center">
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                1
            </div>
            <div class="col col-sm-12">
                4
            </div>
        </div>
    </div>
    <div class="col col-sm-6">2
    </div>
    <div class="col col-sm-3">
        <div class="row text-center">
            <div class="col col-sm-12">
                3
            </div>
            <div class="col col-sm-12">
                5
            </div>
        </div>
    </div>
</div>
<div class="row text-center">
    <div class="col col-sm-4">
        <div>
            6
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            7
        </div>
    </div>
    <div class="col col-sm-4">
        <div>
            8
        </div>
    </div>
</div>

см. Этот ответ Ответ Stackoverflow