Can you define a row and a column mixin in the same css tag in Zurb Foundation?

Question

I am working with Zurb Foundation 4 mixins and I was wondering what happens if you put a row and column in the same css tag?

header {
          @include grid-row;
          @include grid-column(9);
          }
h1  {
          }

Instead of doing something similar to this:

header {
          @include grid-row;
          }
h1  {
          @include grid-column(9);
          }

Thanks in advance.

Answer 1

If you put row and column in the same css selector infact you are going to omit the .row or @include grid-row(it means @include grid-column(9) properties will override on @include grid-row property):

header { @include grid-row; @include grid-column(9); }

equal to:

header { @include grid-column(9); }

So your columns going to float based on screen size.

When you use .row or @include grid-row as a separate tag it makes columns going to stand at the center of the page based on $row-width size.

Look at this two example with two different codes:

Example 1:

header {
    @include grid-row;
    @include grid-column(9);
}

Example 1 Output is:

Example 2:

#header {
    @include grid-row;
    h1 {
        @include grid-column(9);
    }
    h2 {
        @include grid-column(3);
    }
}

Example 2 Output is: