box

by Marcos Moitas

HTML

<div class="container">
  <div class="row">
    <div class="insight">
      Thing 1
    </div>
    <div class="insight">
      Thing 2
    </div>
    <div class="insight">
      Thing 3
    </div>
    <div class="insight">
      Thing 4
    </div>
    <div class="insight">
      Thing 5
    </div>
  </div>
</div>

SCSS

.container {
  display: flex;
  flex-flow: row wrap;
  border-radius: 8px;
  background: #CCC;
  overflow: hidden;

  .row {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  }

  .insight {
    flex-basis: 140px;
    flex-grow: 1;
    padding: 24px;

    &:first-child {
      background-image: linear-gradient(blue, purple);
      color: white;
      font-weight: bold;
    }
  }

  .reload {
    padding: 24px;
  }
}