Menu icon Foundation
Proper mark-up with the grid - using Sass (mixins)

I have never used the grid system before so this all very new to me. I have read all the Foundation documentation on the grid and also read many other related blogs about it and I have a good start, but now I am wondering about some specific limitations of the grid.

1. Do you need to define a new row (@include grid_row) every time you have twelve columns (@include grid_column(12))? Example below

2. Can you define a column and a row in the same tag? Example below:

Thanks in advance.
Matthew

// for question 1 -----
body {
      @include grid-row;
       }
header {
      @include grid-column(12);
      }
h1 {
      @include grid-row;
      }
body {
      @include grid-column(9);
       }
header {
      @include grid-column(3);
      }
h1 {
      @include grid-row;
      }  



// for question 2 -----
div {
@include grid_row;
@include grid_column(12);
}
            

         

gridmarkupcolumnrow@include@mixinsSass

I have never used the grid system before so this all very new to me. I have read all the Foundation documentation on the grid and also read many other related blogs about it and I have a good start, but now I am wondering about some specific limitations of the grid.

1. Do you need to define a new row (@include grid_row) every time you have twelve columns (@include grid_column(12))? Example below

2. Can you define a column and a row in the same tag? Example below:

Thanks in advance.
Matthew

// for question 1 -----
body {
      @include grid-row;
       }
header {
      @include grid-column(12);
      }
h1 {
      @include grid-row;
      }
body {
      @include grid-column(9);
       }
header {
      @include grid-column(3);
      }
h1 {
      @include grid-row;
      }  



// for question 2 -----
div {
@include grid_row;
@include grid_column(12);
}
            

         
Steve Trask over 5 years ago

Hi Matthew,

I must admit I am slightly confused how you are using Sass with the grid, i know you can create your own custom grid class but can you explain what your code is doing?

In the HTML grid sense the answers would be:

  1. Yes you need a new row

  2. No they have to be in separate DIVs

I can not see why these would be any different in what you are doing as the output will have to be HTML

Hope this helps

Steve

Matt Camp about 5 years ago

Steve,

Currently my site is working using the sass mixins grid, but I don't understand why. Below is a simplified version of my HTML and SCSS (using the grid with sass).

<header>
  <h1> logo </h1>
    <a class="login"> Login </a>

<nav>
<a class="button1"></a>
</nav>

</header>
header {
@include grid-row();
}
h1 {
@include grid-column(10);
}
.login {
@include grid-column(2);
}
nav {
@include grid-column(12);
}

My question is with the 'nav' part. I thought that every time you had 12 columns you needed to define a new row, but I don't and it still works. The 'nav' goes under the 'h1' and '.login' just like it should (if I had a row before 'nav')

Hope that makes sense. Thanks in advance!

Matthew