css - Zurb Foundation の同じ css タグで行と列の mixin を定義できますか?

Question

Zurb Foundation 4 ミックスインを使用していますが、行と列を同じ css タグに入れるとどうなるのだろうと思っていました。

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

これに似た何かをする代わりに：

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

前もって感謝します。

Answer 1

行と列を同じ css セレクターに入れる場合は、.roworを省略します (プロパティがプロパティでオーバーライドされる@include grid-rowことを意味します)。@include grid-column(9)@include grid-row

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

に等しい：

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

したがって、列は画面サイズに基づいて浮動します。

.rowまたはを別のタグとして使用すると、サイズ@include grid-rowに基づいて列がページの中央に立つようになります。$row-width

2 つの異なるコードを使用したこの 2 つの例を見てください。

例 1:

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

例 1 出力は次のとおりです。

例 2:

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

例 2 出力は次のとおりです。