Foundation 6 Flex Grid

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation-flex.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.1.2/foundation.min.js"></script>
<div class="row">
    <div class="square small-6 columns">
        ABC
    </div>
    <div class="square small-6 columns">
        DEF
    </div>
</div>
<div class="row">
    <div class="square small-6 columns">
        123
    </div>
    <div class="square small-6 columns">
        456
    </div>
</div>

SCSS

.square {
  border: solid blue 1px;
  /* padding-bottom: 30%; */

  display: flex;
  justify-content: center;
  align-items: center;
  
  height: 200px;
}

JavaScript

$(document).foundation();