grid - Foundation Grid Mixin を使用してスペースを追加する - sass

Question

サスとファンデーショングリッドを備えたナビゲーションバーを作ろうとしています。ナビゲーション バーにリンクがありますが、それぞれを 3 列にしたくないので@include grid-column(4);、右端に 3 列の空きスペースを配置します。これは次のようになります: (メールタブは現在ホバーされています)

Foundation Grid Sass Mixins を使用してそこにスペースを追加するにはどうすればよいですか。

Answer 1

idそれぞれを@include grid-column(3);以前のものに変更するだけで問題を修正しました@include grid-column(4);。それらが一列に並んでいて、次の列が3より大きいため、上のナビゲーションバーに自動的にジャンプせず、その下にあるため、これが機能したと思います。

私のミックスインは次のようにレイアウトされています。

    header {
          @include grid-row;
         }
    h1 {
          @include grid-column(9);
    }
    .login{
       @include grid-column(3);
    } 
    nav {
          @include grid-column(12);
        } 
  #games {
          @include grid-column(3);
       }
    #email {
          @include grid-column(3);
       }
    #archive {
          @include grid-column(3);
       }
    .breadcrumbs {
       @include grid-column(12);
    }
    nav a {
}