Is it possible to have a large cell in the middle of a Bootstrap 3 grid?

Question

Is it possible to have a larger nested cell that spans rows and columns using the Bootstrap 3 Grid CSS?

Answer 1

No need any bootstrap. You only need to setup one cell using grid-area. More about it here https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area

Browsers support of grid-area https://caniuse.com/#search=grid-area thanks to 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>