Flexbox - 7 column

source: https://www.fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox http://codepen.io/klamping/pen/YXwgBY?editors=110

by katalin_2003

HTML

<div class="items">
  <div class="item">Heriberto Nickel</div>
  <div class="item">Brittaney Haliburton</div>
  <div class="item">Maritza Winkler</div>
  <div class="item">Carmon Rigg</div>
  <div class="item">Alice Marmon</div>
  <div class="item">
    <div>Lyman Steakley</div>
    <div>Lyman Steakley</div>
    <div>Lyman Steakley</div>
    <div>Lyman Steakley</div>
  </div>
  <div class="item">Zenia Correa</div>
</div>

CSS

.items {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-top: -10px;
  -webkit-justify-content: center;
  justify-content: center;
}

.items .item {
  flex: 1 0 200px;
  box-sizing: border-box;
  background: #e0ddd5;
  color: #171e42;
  padding: 10px;
  margin-left: 10px;
  margin-top: 10px;
}

@media (min-width: 410px) {
  .items .item {
    max-width: calc(50% - 10px);
  }
}

@media (min-width: 620px) {
  .items .item {
    max-width: calc(33.33333% - 10px);
  }
}

@media (min-width: 830px) {
  .items .item {
    max-width: calc(25% - 10px);
  }
}

@media (min-width: 1040px) {
  .items .item {
    max-width: calc(20% - 10px);
  }
}

@media (min-width: 1250px) {
  .items .item {
    max-width: calc(16.66667% - 10px);
  }
}

@media (min-width: 1460px) {
  .items .item {
    max-width: calc(14.28571% - 10px);
  }
}

@media (min-width: 1670px) {
  .items .item {
    min-width: calc(12.5% - 10px);
  }
}