Wrapping divs around large div in bootstrap grid

Question

I need some help with a complex CSS layout problem. If it can be done with just CSS and not javascript that would be ideal.

I need a grid of products with varying heights
There is also a "featured product" that is 2x the height of one of the regular products
The layout on different viewports needs to match the images below

What I have tried so far:

Here is an example of the code I have now:

<div class="container">
<div class="row">
  <div class="l-product large col-xs-6 col-sm-6 col5-md-2 ">
    1
    <br>This div should be double the height of one tile without fixing the height with CSS
  </div>
  <div class="l-product taller col-xs-6 col-sm-3 col5-md-1">
    2
    <br><span>If one div is taller the whole grid breaks</span>
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    3
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    4
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    5
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    6
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    7
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    8
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    9
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    10
  </div>
  <div class="l-product col-xs-6 col-sm-3 col5-md-1">
    11
  </div>
</div>

http://codepen.io/anon/pen/pJBbPN

I am using bootstrap so I tried nesting the rows like this Nested rows with bootstrap grid system? My problem is I could not figure out how to make items move from one row to another in different viewports and it caused the grid to break

Desktop:

Tablet:

Small Tablet:

Mobile:

Hello, I would love to help, and I love bootstrap. Please place a number on each box (in each image), so I know which box corresponds to which in each viewport. — Michael Jones, Aug 12 '15 at 15:54
@MichaelJones I added numbers to the boxes so you can see what I'm trying to do. — Mcestone, Aug 12 '15 at 16:23

score 0 · Answer 1 · edited Aug 13 '15 at 18:38

I'm not sure you can do that with basic bootstrap. I'd recommend using a more advanced technique like Masonry. When you go to the example link, change the browser width. It also adds some nice animation effects.

// external js: masonry.pkgd.js

$(document).ready(function() {

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 130
  });

});

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body { font-family: sans-serif; }

/* ---- grid ---- */

.grid {
  background: #EEE;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 120px;
  height: 120px;
  float: left;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
  margin: 5px;
}

.grid-item--width2 { width: 250px; }

.grid-item--height2 { height: 250px; }

<h1>Masonry - columnWidth</h1>

<div class="grid">
  <div class="grid-item grid-item--width2 grid-item--height2"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

I have looked into this before, my problem is though that I need all the divs in a row to be the same height (the content is dynamic) and the large image to be double that height (also dynamic) so everything lines up. Masonry doesn't seem to have a solution for that unless I'm mistaken. — Mcestone, Aug 12 '15 at 17:09
From what I see, [this example](http://codepen.io/anon/pen/vOMKaq) does everything you want. It even changes the size of the first div based on a width breakpoint. Is there something wrong with it? Also, you say that the content is dynamic, but they need to be the same height. How does should that work exactly? How would the height be calculated? — Marius P., Aug 12 '15 at 17:18

score -1 · Answer 2 · answered Aug 12 '15 at 16:16

if you are using columns u need to divide the columns by 12. so we want to have an even amount, 5 does not break down to 12 columns.

Try below to see results. i have added 6 boxes to smaller boxes.

<div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="big-box">image</div>
            </div>
            <div class="col-xs-6">
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
                <div class="row">
                    <div class="col-xs-4"><div class="mini-box">1</div></div>
                    <div class="col-xs-4"><div class="mini-box">2</div></div>
                    <div class="col-xs-4"><div class="mini-box">3</div></div>

                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

            </div>
        <div class="row">
            <div class="col-xs-2"><div class="mini-box">1</div></div>
            <div class="col-xs-2"><div class="mini-box">2</div></div>
            <div class="col-xs-2"><div class="mini-box">3</div></div>
            <div class="col-xs-2"><div class="mini-box">4</div></div>
            <div class="col-xs-2"><div class="mini-box">5</div></div>
            <div class="col-xs-2"><div class="mini-box">6</div></div>

        </div>
        </div>

Here is a jsfiddle

Or you can use the grid system with jQuery

How would I solve the issue of varying height divs. I am not fixing the heights, they are dynamic. — Mcestone, Aug 12 '15 at 17:10
You would use a masonry layout. with jQuery. here is a good addon. http://masonry.desandro.com/ — pool pro, Aug 12 '15 at 19:59

Wrapping divs around large div in bootstrap grid

2 Answers2