<ul>
<li><span>Bacon ipsum dolor amet minim anim voluptate salami irure dolore, consequat alcatra jowl doner sunt pork loin veniam in.  Tri-tip meatball turkey, sausage reprehenderit prosciutto hamburger quis.  Ea elit ex biltong consequat rump swine turkey reprehenderit.  Duis ground round pork belly, cow meatloaf landjaeger drumstick cillum meatball deserunt pig turducken aute.  Meatball chicken quis lorem excepteur biltong non commodo andouille alcatra cow strip steak salami.  Anim tri-tip ea, pork belly chicken boudin drumstick elit.</span></li><li><span>Flank alcatra dolore jowl turkey beef capicola swine est salami.  Anim magna exercitation kevin leberkas, ham swine quis.  Dolore dolore pork chop do, exercitation aute turkey picanha shankle kielbasa ea cow laboris excepteur ribeye.  Deserunt qui ground round, eiusmod consectetur swine boudin picanha occaecat ut.  Bresaola ribeye commodo, irure exercitation porchetta spare ribs hamburger ipsum.  Boudin ipsum pork rump cow ribeye.  Laboris short ribs prosciutto pork loin, strip steak nulla velit reprehenderit jowl ut in beef ribs sausage proident.</span></li><li><span>Pastrami shank dolore do, sausage shoulder commodo quis pork beef ribs officia velit strip steak.  Deserunt id strip steak, eiusmod prosciutto hamburger commodo ipsum.  Kielbasa occaecat pariatur corned beef andouille prosciutto rump eiusmod ad.  Minim shank kielbasa elit in short ribs beef ribs meatball mollit tempor ut.  Minim quis jerky, tail dolore cupim in eu.  Magna anim elit tongue in filet mignon jowl pariatur ball tip t-bone in.</span></li><li><span>Turducken pork consectetur porchetta cupidatat in.  Swine porchetta magna ea doner boudin drumstick adipisicing quis tail hamburger aute kielbasa ut.  Cupim nisi spare ribs voluptate, aliquip exercitation commodo flank ad tail shankle dolor non.  Chuck lorem voluptate reprehenderit.  Biltong ex aute, jerky dolore landjaeger fugiat ball tip tenderloin sirloin do duis pork loin.</span></li><li><span>Capicola beef ribs salami labore, porchetta anim sint velit ut.  Turkey quis commodo anim.  Adipisicing turkey enim, pork belly picanha leberkas ipsum shankle nisi kevin cow in.  Sed enim lorem et.  Chicken meatball picanha t-bone.  Laboris boudin duis reprehenderit tempor consequat, andouille fatback ball tip short ribs turkey bacon venison consectetur.</span></li><li><span>Officia ut tail tenderloin pork chop excepteur short loin nulla.  Ut in short ribs prosciutto.  Esse minim laborum, consequat prosciutto culpa t-bone officia lorem.  Magna exercitation pariatur cupim.</span></li><li><span>Alcatra turducken salami pariatur cow ipsum, ball tip voluptate meatloaf pig jerky.  Shoulder hamburger sausage, occaecat commodo doner culpa beef in ea tenderloin elit bresaola.  Pancetta turkey pork chop, landjaeger in pork hamburger capicola ex fugiat frankfurter deserunt consequat et.  Turkey ham deserunt, venison salami capicola pastrami nulla short loin enim.  Ham hock fatback pork, short loin exercitation dolore alcatra cupidatat occaecat.</span></li><li><span>Tri-tip in bresaola culpa, est aliquip pork chop aliqua commodo doner porchetta deserunt chuck.  Ut consectetur cillum pork chop picanha.  Laboris veniam in consequat, tri-tip cillum spare ribs corned beef tempor bresaola fatback nulla ham aliquip.  Chuck do ut, shank qui sed officia adipisicing excepteur eiusmod in.</span></li><li><span>Beef ribs flank turducken tri-tip proident hamburger consequat ut commodo pig.  Short loin aute meatloaf incididunt, shankle kevin aliqua pork andouille.  Fatback strip steak veniam filet mignon anim velit minim biltong.  Qui duis ball tip pork meatball nostrud tempor ham hock commodo drumstick et capicola lorem incididunt dolore.  Sirloin excepteur capicola incididunt pastrami.</span></li><li><span>Pancetta alcatra tail, fugiat ut spare ribs kielbasa pork tri-tip.  Mollit velit t-bone sausage, minim shoulder rump shankle aute fatback frankfurter boudin eiusmod lorem.  Ground round magna boudin, jerky pork et cow kielbasa laborum beef veniam quis turducken.  Picanha reprehenderit exercitation cupidatat eiusmod.</span></li><li><span>Fatback boudin ball tip cupidatat tongue.  Pancetta occaecat andouille beef ribs tri-tip, aliqua flank.  Cillum chuck tri-tip short ribs.  Jerky qui eiusmod minim shankle pork loin pork corned beef meatball beef ribs laboris labore sint.  Pancetta commodo dolore, enim labore irure beef kevin leberkas esse pastrami shankle jerky alcatra.  Ball tip pork belly laboris deserunt, venison kielbasa sausage fugiat corned beef pork.</span></li><li><span>Kielbasa nisi pastrami anim reprehenderit meatball tempor.  Excepteur fatback ea kielbasa bacon boudin pork loin.  Eu irure in capicola proident duis tongue shoulder est ut landjaeger rump.  Ut eiusmod hamburger, aliqua swine laborum deserunt picanha.</span></li><li><span>Boudin consectetur fugiat short loin frankfurter spare ribs ut ullamco kielbasa esse cupidatat dolore mollit brisket.  Exercitation culpa hamburger kielbasa leberkas pork loin eiusmod.  Pork hamburger tri-tip exercitation fatback ribeye kevin pork belly dolor reprehenderit ball tip nisi anim.  Ham hock shoulder sirloin fatback.  Pork duis tri-tip in quis brisket ipsum pork loin id.  Velit do sint drumstick incididunt pariatur alcatra shoulder t-bone veniam meatloaf cupidatat ham cupim sed.</span></li><li><span>Pork chop ut biltong proident id dolore doner brisket salami in ipsum reprehenderit labore aute.  Biltong aliquip pork belly sirloin nisi aliqua eiusmod in ham hock tenderloin irure salami fatback ham ex.  Sirloin esse biltong short loin swine, salami eiusmod porchetta chicken.  Meatball consequat ut, veniam quis ex corned beef officia picanha pork chuck.  Ex in cupidatat fatback exercitation, turducken tongue ground round.  Fugiat jowl fatback, swine boudin occaecat irure magna shank short ribs excepteur cow.</span></li><li><span>Dolor ut hamburger biltong pork belly strip steak pig velit salami bacon id pastrami meatloaf.  Meatloaf turducken sausage spare ribs irure tongue pork chop beef cupim do ullamco labore.  Dolore jerky kevin ipsum cupim.  Do veniam fatback lorem proident ea mollit jerky ipsum doner shoulder voluptate tri-tip short ribs ullamco.</span></li>
  
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Raleway:200,600,700,400);
body {
  background: #eee;
  font-family: 'Raleway', Arial, sans-serif;
}


$gutter: 15px;
// BASE FLEX setup
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  @include display-flex();
  @include flex-wrap(wrap);
  @include justify-content(space-between);
  @include align-items(stretch);
  margin: 0 auto;
  background: #fff;
  li {
    @include display-flex(); // to allow equal height columns
    margin: 0 0 $gutter;
    span {
      display: block;
      border: 1px solid #555;
      padding: 1em;
    }
    &:empty { // fillers
      height: 0;
      margin: 0;
      padding: 0;
    }
  }
}

@media screen and (min-width: 500px) {
  $width: 480px;
  $gutter: 17px;
  $elementsPerRow: 2;
  $percent: ($width - ($elementsPerRow - 1) * $gutter) / $elementsPerRow;
  ul {
    width: $width;
    li {
      @include flex(0 0 $percent);
      margin: 0 0 $gutter;
      
      &:nth-of-type(3) {
        @include flex(0 0 $percent*2 + $gutter);
      }
    }
  }
}

@media screen and (min-width: 768px) {
  $width: 740px;
  $gutter: 18px;
  $elementsPerRow: 3;
  $percent: ($width - ($elementsPerRow - 1) * $gutter) / $elementsPerRow;
  ul {
    width: $width;
    li {
      @include flex(0 0 $percent);
      margin: 0 0 $gutter;
      
      &:nth-of-type(3) {
        @include flex(0 0 $percent);
      }
      
      &:nth-of-type(2) {
        @include flex(0 0 $percent*2 + $gutter);
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  $width: 960px;
  $gutter: 20px;
  $elementsPerRow: 4;
  $percent: ($width - ($elementsPerRow - 1) * $gutter) / $elementsPerRow;
  ul {
    width: $width;
    li {
      @include flex(0 0 $percent);
      margin: 0 0 $gutter;
      &:nth-of-type(2) {
        @include flex(0 0 $percent);
      }
      &:nth-of-type(3) {
        @include flex(0 0 $percent*2 + $gutter);
      }
      &:nth-of-type(9) {
        @include flex(0 0 $percent*3 + $gutter*2);
      }
    }
  }
}




@media screen and (min-width: 1300px) {
  $width: 1200px;
  $gutter: 20px;
  $elementsPerRow: 5;
  $percent: ($width - ($elementsPerRow - 1) * $gutter) / $elementsPerRow;
  ul {
    width: $width;
    li {
      @include flex(0 0 $percent);
      margin: 0 0 $gutter;
      &:nth-of-type(9) {
        @include flex(0 0 $percent);
      }
      &:nth-of-type(2) {
        @include flex(0 0 $percent);
      }
      &:nth-of-type(3) {
        @include flex(0 0 $percent*2 + $gutter);
      }
      &:nth-of-type(10) {
        @include flex(0 0 $percent*4 + $gutter*3);
      }
    }
  }
}

// need empty li elements to achieve last row 'float left' effect
// http://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid