Edit in JSFiddle

<div class="box">
  <div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="row">
    <div class="item"></div>
  </div>
  <div class="row">
     <div class="item"></div>
     <div class="item"></div>
  </div>
</div>

$width = 100px;
$height = 100px;
$margin = 4px;

@mixin black {
    background-color: black;
}

@mixin white {
    background-color: white;
}

body {
    @include black;
}
.box {
    @include white;
    width: $width;
    border-radius:$width/10;
    display: flex;
    flex-wrap: wrap;
}
.row {
    flex-basis: 100%;
    display:flex;
}
.item {
    @include black;
    width: $width/4;
    height: $height/4;
    border-radius: $width/8;
    float: left;
    margin: $margin;
}
.row:nth-child(2){
  justify-content: center;
}

.row:nth-child(3){
  justify-content: space-between;
}