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" id="row2"></div>
  </div>
  <div class="row">
     <div class="item"></div>
     <div class="item" id="row3"></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;
    height: $height;
    border-radius:$height/10;
}
.row {
    width: $width;
    height: $height/3;
}
.item {
    @include black;
    width: $width/4;
    height: $height/4;
    border-radius: $width/8;
    float: left;
    margin: $margin;
}
#row2 {
    margin: $margin $width*3/8;
}
#row3 {
    margin: $margin;
    margin-left: $width/3+$margin;
}