Jeet cycling

cycle.css

li {
  background: #ddd;
  height: 40px;
  margin-top: 5px;
  margin-bottom: 5px;
}
@media screen and (min-width: 640px) {
  li {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 47.540983606557376%;
    margin-left: 0%;
    margin-right: 4.918032786885246%;
  }
  li:before,
  li:after {
    content: '';
    display: table;
  }
  li:after {
    clear: both;
  }
  li:nth-child(2n) {
    margin-right: 0%;
    float: right;
  }
  li:nth-child(2n+1) {
    clear: both;
  }
}
@media screen and (min-width: 960px) {
  li {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 31.182795698924725%;
    margin-left: 0%;
    margin-right: 3.225806451612903%;
  }
  li:before,
  li:after {
    content: '';
    display: table;
  }
  li:after {
    clear: both;
  }
  li:nth-child(2n) {
    margin-right: 3.225806451612903%;
    float: left;
  }
  li:nth-child(2n+1) {
    clear: none;
  }
  li:nth-child(3n) {
    margin-right: 0%;
    float: right;
  }
  li:nth-child(3n+1) {
    clear: both;
  }
}
@media screen and (min-width: 1280px) {
  li {
    *zoom: 1;
    float: left;
    clear: none;
    text-align: inherit;
    width: 23.200000000000003%;
    margin-left: 0%;
    margin-right: 2.4%;
  }
  li:before,
  li:after {
    content: '';
    display: table;
  }
  li:after {
    clear: both;
  }
  li:nth-child(3n) {
    margin-right: 2.4%;
    float: left;
  }
  li:nth-child(3n+1) {
    clear: none;
  }
  li:nth-child(4n) {
    margin-right: 0%;
    float: right;
  }
  li:nth-child(4n+1) {
    clear: both;
  }
}
.container input {
  box-sizing: border-box;
  display: block;
  padding: 10px;
  width: 100%;
}
li:first-child div {
  background: #0ad;
  *zoom: 1;
  float: left;
  clear: none;
  text-align: inherit;
  width: 22%;
  margin-left: 0%;
  margin-right: 4%;
  height: 40px;
}
li:first-child div:before,
li:first-child div:after {
  content: '';
  display: table;
}
li:first-child div:after {
  clear: both;
}
li:first-child div:last-child {
  margin-right: 0%;
}

cycle.styl

li
  background #ddd
  height 40px
  margin-top 5px
  margin-bottom 5px

  @media screen and (min-width: cols(8))
    col(1/2, cycle: 2, gutter: gutter(8))

  @media screen and (min-width: cols(12))
    col(1/3, cycle: 3, uncycle: 2, gutter: gutter(12))

  @media screen and (min-width: cols(16))
    col(1/4, cycle: 4, uncycle: 2, uncycle: 3, gutter: gutter(16))