①sassフォルダにダウンロードデータの中のprofoundgrid/sass/grid/_grid.scssを入れる
②style.scssの冒頭に
@import "_grid.scss";
をいれる
③すぐ下のおれおれ変数ゾーンに以下の変数を入れる。
※ここで注意したいことが。この3つに「%指定」と「px指定」が混ざっていると、エラーが出てSassがコンパイルされない。
$total_width:100%; //カラムの総幅。px/%指定が可能 $container_margin:2%; //container左右のマージン。px/%/auto指定が可能 $gutter_width:2%; //生成カラムの余白(ガーター)幅。px/%指定が可能
また、カラム数も自分で決めることができます。よほどのことがなければ変えなくていい。
$total_columns:12;//カラム数。デフォルトは12
④例えば、PCビューでは3つの要素が横並び、タブレットでは左2つの要素が横並び、最後の要素が段落ちして全幅にしたいときは以下のコード。
.container{ width: 100%; margin:auto; position:relative; padding: 0 8.75%; box-sizing: border-box; @include media(min_container){ padding: 0; max-width: 1640px; } } .grid_container{ @include container(); @include clearfix(); @include media(tablet){ @include generate_grid_positions(div,6); } } .cc{ @include column(4); background: blue; height: 500px; @include media(tablet){ @include column(6); margin-bottom: 10px; } } .grid_container .cc:nth-child(1){ @include push(0); } .grid_container .cc:nth-child(2){ @include push(4); @include media(tablet){ @include push(6); } } .grid_container .cc:nth-child(3){ @include push(8); @include media(tablet){ @include push(0); @include column(12); } }
全体を囲う要素containerを最大幅1640pxにして、その子要素にgrid_containerを入れる。
このgrid_containerがgridシステムの親要素として機能させるためprofoundgridのmixinである@include containerと@include clearfixを入れ、
メディアクエリ内で@include generate_grid_positions(div,6);を設定。引数はgrid_containerの子要素と、デフォルトとして一つの要素に何カラム使うのかの数値を。
メディアクエリでレイアウトを変えたい時、grid_containerにこの@include generate_grid_positions(div,6);をいれてやらないと、要素が重なってしまう。
あとはgrid_containerの子要素であるdiv.ccに@include column()と@include push()を設定。メディアクエリ内でこのmixinを設定することでブレイクポイントでレイアウトが変えられる。
【参考サイト】
http://commonsense-design.com/web/profound-grid-introduction/