<section>

  <div class="flex row-decoration">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
  </div>
  <div class="flex row-decoration">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell" style="margin-left: auto"></div>
  </div> 
  <div class="flex row-decoration">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell" style="margin-left: auto; margin-right: auto"></div>
  </div> 
  <div class="flex row-decoration">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell" style=" height: 25px; margin-left: auto; margin-top: auto"></div>
  </div>
  <div class="flex row-decoration" style="height: 120px">
      <div class="cell" style="margin: auto"></div>
  </div>
  
</section>
.flex {
  display: flex;
}

.cell {
  width: 50px;
  height: 50px;
  border-radius: 2px;
  background-color: #317cd8;
  
  &:not(:last-child) {
    margin-right: 6px;
  }
}

.row-decoration {
  padding: 6px;
  border: 2px solid #317cd8;
  border-radius: 1px;
  margin-bottom: 6px;
}

section {
   max-width: 680px;
   margin: auto;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.