Solution 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>

Problem :

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

enter image description here

Comments

Comment posted by browser support

Just be careful with

Comment posted by Jamie Carruthers

Oh my, so I don’t even need Bootstrap grid for this. Incredible. I guess it’s time to learn CSS Grid

Comment posted by cssgrid-generator.netlify.app

Updated answer with browser support link, thanks to @Gerard. To better understand how grid-area works – try this generator

Comment posted by Jamie Carruthers

Is it possible to make the CSS Grid responsive without media queries? e.g. as the browser width reduces, the number of columns reduces from 6 to 5, and so on.

Comment posted by focus.style

Unfortunately – no. And with

By

Leave a Reply

Your email address will not be published. Required fields are marked *