Is it possible to have a larger nested cell that spans rows and columns using the Bootstrap 3 Grid CSS?
1 Answers
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>Related