Foundation 6 Flex Grid

by Mark Melton

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%;
}

JavaScript

$(document).foundation();