<div class="grid">
  <div class="grid__container">
    <div class="box box_size_2x2">
      <div class="box__helper">
        <div class="box__content">1</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">2</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">3</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">4</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">5</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">6</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">7</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">8</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">9</div>
      </div>
    </div>
    <div class="box box_size_2x1">
      <div class="box__helper">
        <div class="box__content">10</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">11</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">12</div>
      </div>
    </div>
    <div class="box box_size_2x2">
      <div class="box__helper">
        <div class="box__content">13</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">14</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">15</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">16</div>
      </div>
    </div>
    <div class="box box_size_2x1">
      <div class="box__helper">
        <div class="box__content">17</div>
      </div>
    </div>
    <div class="box box_size_2x1">
      <div class="box__helper">
        <div class="box__content">18</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">19</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">20</div>
      </div>
    </div>
    <div class="box ">
      <div class="box__helper">
        <div class="box__content">21</div>
      </div>
    </div>
  </div>
</div>

$grid-border-color: #ffffff;
$grid-border-width: 4px;
$grid-item-width: 20%;

.grid {
  box-sizing: border-box;
  width: 100%;
  background: black;
  padding: 10px;

  &__container {
    display: flex;
    flex-wrap: wrap;
    border: ($grid-border-width/2) solid $grid-border-color;
  }
}


.box {
  position: relative;
  box-sizing: border-box;
  width: $grid-item-width;

  &::before {
    content: '';
    position: relative;
    width: 100%;
    display: block;
    height: 0;
    padding-bottom: 100%;
  }

  &__helper {
    height: 0;
    width: 100%;
    padding-bottom: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  &__content {
    border: ($grid-border-width/2) solid $grid-border-color;
    padding: 0.5em 1em;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }

  &_size_2x2 { width: $grid-item-width * 2; }
  &_size_2x2::before { padding-bottom: 50%; }
  &_size_2x2 + & + & + & + & { margin-left: $grid-item-width * 2; }

  &_size_2x1 { width: $grid-item-width * 2; }
  &_size_2x1::before { padding-bottom: 50%; }
  &_size_2x1 &__helper { padding-bottom: 50%; }
}

.box__content {
  font-size: 30px;
  background-color: #252525; color: #ffffff;
}

.box:nth-child(5) .box__content,
.box:nth-child(9) .box__content,
.box:nth-child(11) .box__content,
.box:nth-child(19) .box__content,
.box:nth-child(21) .box__content {
  background-color: #ffc400;
  color: #000000;
}