Menu icon Foundation
Grid system not working for me

 

I'm trying out foundation and just playing around with the grid system but it doesn't seem to work for me. I installed foundation sites through npm and I referenced it in my link tag in my index.html. Here's my code:

 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Sandbox</title>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="/node_modules/foundation-sites/dist/css/foundation.css">
  </head>
  <body>
    <div id="row"></div>

    <div class="row">
      <div class="large-3 medium-3 small-3 columns"><h4>why wont you go to the left!!</h4></div>
      <div class="large-6 medium-6 small-6 columns"><h4>why wont you go to the middle!!</h4></div>
      <div class="large-3 medium-3 small-3 columns"><h4>why wont you go to the right!!</h4></div>
    </div> 

  </body>
  <script src="/bundle.js"></script>
</html>

 

The output was just:

 

why wont you go to the left!!

why wont you go to the middle!!

why wont you go to the right!!

 

I'm trying to get this result:

why wont you go to the left!!  why wont you go to the middle!!  why wont you go to the right!!

 

 

foundation sitesgrid

 

I'm trying out foundation and just playing around with the grid system but it doesn't seem to work for me. I installed foundation sites through npm and I referenced it in my link tag in my index.html. Here's my code:

 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation Sandbox</title>
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="/node_modules/foundation-sites/dist/css/foundation.css">
  </head>
  <body>
    <div id="row"></div>

    <div class="row">
      <div class="large-3 medium-3 small-3 columns"><h4>why wont you go to the left!!</h4></div>
      <div class="large-6 medium-6 small-6 columns"><h4>why wont you go to the middle!!</h4></div>
      <div class="large-3 medium-3 small-3 columns"><h4>why wont you go to the right!!</h4></div>
    </div> 

  </body>
  <script src="/bundle.js"></script>
</html>

 

The output was just:

 

why wont you go to the left!!

why wont you go to the middle!!

why wont you go to the right!!

 

I'm trying to get this result:

why wont you go to the left!!  why wont you go to the middle!!  why wont you go to the right!!

 

 

Rafi Benkual over 2 years ago

 The setup you have there doesn't appear to be standard. Are you using the Sass version of Foundation? Where are you linking up the CSS from?

 

You can download a fresh copy here: http://foundation.zurb.com/sites/download.html/ and it will be set up out of the box.

Jonathan Mosesman about 2 years ago

I am having the same issue. I have a fresh install on Foundation 6, trying to use the row small-up-2 medium-up-3 class, even following Lesson #161 with Christine Sir and I am NOT getting results. Block grid not displaying at all.

Duncan about 2 years ago

Also having the same issue, using the very latest download from Github.

Anyone have any ideas on this?

 

Cheers :)

Duncan about 2 years ago

Ok so tried using "grid-x" instead and this seems to work well. See here for more: https://foundation.zurb.com/sites/docs/xy-grid.html

Ryan Patterson about 2 years ago

Yeah, seems like you guys are trying to use float/flex grid classes but your Foundation is setup for XY Grid, which is what I believe is the default grid type now for new installs of Foundation. If you are using the SASS version, you can change the type of grid being used by commenting out/uncommenting certain includes. 

You will probably see something like this:

@include foundation-xy-grid-classes;
//@include foundation-grid;
//@include foundation-flex-grid;

 

If you comment out the top line, then uncomment out either the foundation-grid (float grid) or foundation-flex-grid (flex-grid) your column classes should work.

Duncan about 2 years ago

Ahhhhhh thanks Ryan, that makes a total sense! I am new to Foundation so this is a learning curve for me.

Will go and have a play with those grids now, although as XY Grid is default we may just stick with that :)