Search code examples
csszurb-foundationzurb-foundation-6

Foundation 6 Grid System Doesn't Work

Here is my html, I am using the SCSS version:

<!doctype html>
<html class="no-js" lang="en" dir="rtl">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title here</title>
  <link rel="stylesheet" href="css/app.css">
</head>

<body>
  <div class="row">
    <div class="small-3 small-centered columns">3 centered</div>
  </div>
  <div class="row">
    <div class="small-6 large-centered columns">6 centered</div>
  </div>
  <div class="row">
    <div class="small-9 small-centered large-uncentered columns">9 centered</div>
  </div>
  <div class="row">
    <div class="small-11 small-centered columns">11 centered</div>
  </div>
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/what-input/dist/what-input.js"></script>
  <script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

Here is what I get:

enter image description here

UPDATE (clarification):
When I inspect the elements, they don't have a row/column class definition, and they are not centered at all.

What am I doing wrong?

Note: I am using the rtl settings. I checked if it broke things, but it still didn't work.

Solution

  • Do you have an @include foundation-float-classes or @include foundation-flex-grid on your app.scss? Maybe you are using only @include foundation-xy-grid-classes, where there are no .row and .columns anymore, only .grid-x and .cell