Dynamic CSS grid for product overview eCommerce

Question

I'm trying to figure out a way to make a dynamic CSS grid to fill up whole "rows" even though there are no real rows. As you see in my fiddle, I've put the Ad as the 10th child in the markup which puts in in a new (the 3rd) "row" which results in a white space in the "row" above, this is expected behavior and I understand why this is happening.

My question is, is there some clever way of getting each "row" to be filled up WITHOUT javascript libraries like Masonry. I've been playing around with all different kind of pseudo selectors but still success.

main {
  width: 1000px;    
}

article {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  padding-left: 12px;
  padding-right: 12px;
    margin-bottom: 20px;
}

.ad {
  width: 40%;
}

Here's a JSFiddle link: https://jsfiddle.net/3w7qysn8/

Answer 1

Here you have a solution which may do what you need. I changed the ul and li to show how it is done without them. SImply put them back if you prefer the list styling.

The fiddle is well commented, have a go with it (be sure to resize your browser window a LOT)...

/**********************************************/
/* Globals                                    */
/**********************************************/
@import url("http://fonts.googleapis.com/css?family=Work+Sans");

html, body                  { box-sizing: border-box; height: 100%; width: 100%;
                              margin: 0px; padding: 0px; border: 0px; cursor: default }

body                        { font-family: 'Work Sans', Helvetica, Arial, sans-serif;
                              -webkit-user-select: none; -moz-user-select: none; 
                                  -ms-user-select: none;      user-select: none }

*, *:before, *:after        { box-sizing: border-box }

/* *                         { outline: 1px dashed red } /* just for debugging */

/**********************************************/
/* RESPONSIVE COMPONENT BOX default rules     */
/**********************************************/
.rcb { /* [MANDATORY] Main 'Responsive Component Box' container */ 
    overflow-x: hidden; /* Content wraps vertically, no horizontal scollbar needed */
    overflow-y: auto;   /* Vertical scrollbar when needed */
    min-width:  330px;  /* [OPTIONAL] MDL, best value is a multiple or division of 330x200 (200x330) for all types of devices */
    min-height: 200px;  /* [OPTIONAL] ditto */
    width: 100%;        /* [OPTIONAL] Maximum width within parent element */
    height: auto;       /* [OPTIONAL] Adjust height to child element needs */
    padding: 15px;      /* Needed to get from under autohide IE scrollbar, check difference with FF/Ch */

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */
}
.rcb-center {
    margin: 0 auto
}

.rcb-cmp-list { /* [MANDATORY] Component list, direct child of RCB, controls the flexbox behaviour */
    display: flex;      /* make element a flexible layout container */
    flex-wrap: wrap;    /* a row of N columns, wrapping within parent frame*/

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */
}
.rcb-cmp-item { /* [RECOMMENDED] RCB component list item, default RCB influences flexbox behaviour of parent list */

    /* FLEX: is the base rule for all box items, */
    flex: 1 1 176px;    /* add auto or 0, or add some min required width (fiddle away!) */

    min-width:  176px;  /* best value is a division of parent width for all types of devices */
    min-height: auto;   /* override if you want to set minimum; interacts with flex-basis (flex: n n basis)! */


    max-width:  100vh;  /* don't make this too small, leave as is or make it a multiple of min-width */
    max-height: 100vh;  /* ditto */
    margin: 10px;        /* nice little space between boxes (See MQ) */

    overflow: hidden;   /* Chop off outside content */

    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.2); transition: all 75ms ease;

    position: relative; /* [OPTIONAL] defined for 'absolute' child :before and :after pseudo elements */

   /* border:  1px solid transparent; *//* smoothing (for skewed/irregular/3D items) */
   /* or outline: 1px solid transparent; */
}
.rcb-cmp-item img {
    display: block }    /* remove the gap below image elements 
                           (by default, IMG is an inline element and cause bottom space) */

.rcb-cmp-item-cnt > * { /* [OPTIONAL] RCB component list content container, fully occupies parent  */
    min-width: 100%;    /* min/max 100% makes sizes fixed to parent */    
    max-width: 100%
}

/**********************************************/
/* RESPONSIVE COMPONENT BOX exceptions/extras */
/**********************************************/

.ad {
    /* exception to the base rule of 176px */
    flex: 1 1 376px;    /* grow and shrink with base width of 376px */
}

.rcb-cmp-item:hover { /* [OPTIONAL], obviously */
    box-shadow: 0px 4px 9px rgba(42, 47, 57, 0.5);
    transform: scale(1.05)
}

/**********************************************/
/* standard element styling                   */
/**********************************************/

#main {
    max-width: 1000px;  /* main container, smaller if so required by device */
    margin: 0 auto;     /* center horizontally */
}

.ad {
    background-color: rgba(255,193,7,1); color: rgba(0,0,0,.87); /* MDL black on amber */
}

<main id="main" role="main" class="rcb">    
    <div class="rcb-cmp-list">
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item ad"><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/376x200">Adverts</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
        <div class="rcb-cmp-item"   ><div class="rcb-cmp-item-cnt"><img src="http://placehold.it/176x200">Product</div></div>
    </div>
</main>