Можно ли иметь большую ячейку в середине сетки Bootstrap 3?

Question

Возможно ли иметь более крупную вложенную ячейку, которая охватывает строки и столбцы, используя сетку Bootstrap 3 CSS?

Answer 1

Не нужно bootstrap. Вам нужно всего лишь настроить одну ячейку, используя grid-area. Подробнее об этом здесь https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

Браузеры поддерживают grid-area https://caniuse.com/#search = grid-area благодаря Gerard

.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
min-height: 300px;
}

.grid > div {
background: #ccc;
}

.grid > div.my-big-sell {    
grid-area: 2 / 2 / 4 / 6;
background: #000;
}

<div class="grid">
  <div class="my-big-sell"> </div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

Вы можете достичь этого с битом css:

    <div col-2> </div>
    <div col-6 class="middle-box"> </div>
    <div col-2> </div>

    <div col-2> </div>
    <div col-6 class="middle-box"> </div>
    <div col-2> </div>

    css: .middle-box {border: none, background-color: ---}