<h1>List of Products</h1>
<section>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article>
    <header>Something</header>
    <p>
      Lorem ipsum howdy you doodle goodle gobbligook you this is fantastic and amazing. However, it won't be justified until confirmed innocent and elegant in the end. God bless this work. Amen.
    </p>
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
  <article class="filler">
  </article>
</section>
h1 
  margin 10px 20px 0
  border-bottom 2px solid black

section
  margin 10px 20px 0
  display flex
  flex-flow row wrap
  justify-content space-between
  align-content flex-start
  min-width 0
  width auto
  
  article
    order 999999
    min-width 150px
    max-width 19vw
    min-height 200px
    flex 1 1 23vw
    border 1px solid black
    padding 20px 2vw
    margin 0 0 20px 0

    &.filler
      order 9999999
      border-color transparent
      min-height 0
      height 0
      padding-top 0
      padding-bottom 0      
      margin-bottom 0
    
    header
      font-size 2em
      font-weight bold
    
    
  
  
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.2/underscore-min.js