Web

Sassのグリッドシステム「Profound Grid」の使い方

: 2014/11/04
: Jomo
: sass,; web

巷にはたくさんのグリッドシステムがありますが、正直どれを使っていいか分からないです…。とりあえず最近使っているProfound Gridについて意外と解説が少ないので、自分が使っている範囲で説明してみようと思います。

Profound Gridとは？

Sass(SCSS)を使ったグリッドシステムです。 BootstrapやFoundationの様にUIなどは用意されておらず、完全にレイアウト専用ですね。
Profound Gridのページ、またはGithubからダウンロードができます。

Profound Grid | A grid system for fixed and fluid layouts

使う準備

使うファイルは_grid.scssのみ。

これをメインのSassファイルに@importすれば、使う準備が完了します！あっという間ですね！

@import grid; //パスは任意の場所です

1	@import grid; //パスは任意の場所です

ざっくりとした使い方は？

よくあるグリッドシステムは、htmlのマークアップ時にclassを付与していくパターンが多いですよね！ ProfoundGridは、おおまかに２つの使い方があります。

グリッドを使いたい要素に対してmixinを@includeしてグリッドを生成する方法
mixinでclassを生成して、マークアップ時に要素にclassをつける方法

結局は両方使う必要があるのですが、ざっくりとした傾向として

Media Queryでレイアウトを切り替える場合→①の方法
Fluid又は固定レイアウトで切り替えない場合→②の方法

という感じがあるかなぁ…と思います。もちろん組み合わせて使うこともできますよ！

さっそく使ってみよう

基本的には他のグリッドシステムと同じで、「コンテナになる要素を生成し、その中の各要素に対してグリッドを指定する」感じになります。それではさっそく、実際の使い方を見てみましょう！

初期値の設定

まずは初期値（変数）の設定をします。Media Queryごとに設定もできますよ！主に設定するのは以下の３つ。設定していないとデフォルト値が使われます。

$total_width:100%; //カラムの総幅。px/%指定が可能
$container_margin:2%; //container左右のマージン。px/%/auto指定が可能
$gutter_width:2%; //生成カラムの余白（ガーター）幅。px/%指定が可能

$total_width:100%; //カラムの総幅。px/%指定が可能

$container_margin:2%; //container左右のマージン。px/%/auto指定が可能

$gutter_width:2%; //生成カラムの余白（ガーター）幅。px/%指定が可能

図で表すとこんな感じです。

ここで注意したいことが。この3つに「%指定」と「px指定」が混ざっていると、エラーが出てSassがコンパイルされません！デフォルト値は混ざってるので、そのまま使うとまさかのエラーが出ます。何でだ…。

リキッドレイアウトにしたい時は%指定、固定幅ならpx指定…という感じで統一してください。

基本リキッドで最大幅を指定したい…という時は、コンテナにした要素（詳しくは後述します）に対してmax-widthを設定して、$container_marginをautoにしてあげればOKです。個別にコンテナの最大幅が変え放題って柔軟でいいですよね！

また、カラム数も自分で決めることができます。よほどのことがなければ変えなくていいと思います。

$total_columns:12;//カラム数。デフォルトは12

1	$total_columns:12;//カラム数。デフォルトは12

ちなみにコンテナ内の分割数=カラム数になるので、1カラムの幅はコンテナ幅に依存します。コンテナを入れ子にしたりした場合は、その分1カラムの幅が狭くなったりするのでお気をつけ下さい。

基本の使い方

大まかなレイアウトをする場合は、以下の3つのmixinを使えばOKです。

@include container();//グリッドのコンテナを生成
@include column();//カラムの生成・幅指定
@include push();//カラムの位置を指定

@include container();//グリッドのコンテナを生成

@include column();//カラムの生成・幅指定

@include push();//カラムの位置を指定

例えばこんな感じのレイアウトにしたい場合は、以下の様にします。

html

<div id="content">
   <aside id="left"></aside>
   <article id="main"></article>
   <aside id="right"></aside>
</div>

</div>

Sass

#content{
    @include container();
    @include clearfix();
    #left{
       @include column(3);
    }
    #main{
       @include column(6);
       @include push(3);
    }
    #right{
       @include column(3);
       @include push(9);
    }
}

#content{

@include container();

@include clearfix();

#left{

@include column(3);

}

#main{

@include column(6);

@include push(3);

}

#right{

@include column(3);

@include push(9);

}

@include column();の引数は、カラム幅を指定します。1だと1/12の幅、6だと6/12=半分の幅になります。@include push();の引数は、カラム位置です。1だと左から1カラム分、6だと左から6カラム=半分の位置に移動します。
また、コンテナはそのつどclearfixをかけてあげないとコンテナが全部重なる…という悲しいことになりますので、ご注意ください。

同じ幅のボックスを並べる

コンテナの中に同じ幅のボックスを並べたい…という場合は、@include generate_grid_positions();を使います。

html

<div id="content">
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
</div>

</div>

Sass

#content{
    @include container();
    @include clearfix();
    section{
        @include column(4);
    }
    @include generate_grid_positions(section,4);
}

#content{

@include container();

@include clearfix();

section{

@include column(4);

}

@include generate_grid_positions(section,4);

}

親要素に@include container();をして、並べたい子要素に対して@include column();を設定します。ここまでは同じですが、このままだと子要素が重なってしまうので、親に対して@include generate_grid_positions();を指定してください。（分かりやすいように子要素の下に書いてますが、別に上でもOKです。）引数はカラム指定した子要素と、その子要素のカラム幅です。これでずらりと並びます。グリッドの縦マージンは、$gutter_widthと同じ値になります。

classを生成してマークアップ

@include generate_helper_classes();でクラスを生成して、マークアップ時にクラスを付与するタイプです。ここではこんな感じにしたい場合のマークアップにしてみます。

Sass

とりあえずコンテナは生成しないといけないので、コンテナになるarticle要素に対して@include container();をします。さらに@include generate_helper_classes();も呼び出しましょう。これでクラスが生成されます。

article{
    @include container();
    @include clearfix();
}
@include generate_helper_classes();

article{

@include container();

@include clearfix();

}

@include generate_helper_classes();

場合によりますが、generate_helper_classesは特定要素に対して@includeしない方が使い勝手がいいと思います。

html

生成したクラスをhtml側でマークアップします。 col+カラム数のクラスでカラム幅を指定、push+プッシュ数のクラスでカラム位置を指定できます。

<article>
    <div class="col3 push0"></div>
    <div class="col3 push3"></div>
    <div class="col3 push6"></div>
    <div class="col3 push9"></div>
</article>
<article>
    <div class="col6 push3"></div>
</article>
<article>
    <div class="col6 push0"></div>
    <div class="col6 push6"></div>
</article>

</article>

</article>

</article>

色々と組み合わせれば、かなり柔軟なレイアウトもできますよ！

Media Queryで切り替える

レスポンシブでいろいろ切り替えたい方は、それぞれのブレークポイント内で異なるmixin設定をすることになります。

Sass

@media all and (min-width: 960px) {
    $total_width:100%;
    $gutter_width:4%;
    #content{
        @include container();
        @include clearfix();
        section{
            @include column(4);
        }
        @include generate_grid_positions(section,4);  
        }
}
@media all and (max-width: 959px) and (min-width: 720px) {
    $total_width:100%;
    $gutter_width:2%;
    #content{
        @include container();
        @include clearfix();
        section{
            @include column(6);
        }
        @include generate_grid_positions(section,6);  
        }
}
@media all and (max-width: 719px) {
    $total_width:100%;
    $gutter_width:4%;
    #content{
        @include container();
        @include clearfix();
        section{
            @include column(12);
        }
        @include generate_grid_positions(section,12);  
    }
}

@media all and (min-width: 960px) {

$total_width:100%;

$gutter_width:4%;

#content{

@include container();

@include clearfix();

section{

@include column(4);

}

@include generate_grid_positions(section,4);

}

@media all and (max-width: 959px) and (min-width: 720px) {

$total_width:100%;

$gutter_width:2%;

#content{

@include container();

@include clearfix();

section{

@include column(6);

}

@include generate_grid_positions(section,6);

}

@media all and (max-width: 719px) {

$total_width:100%;

$gutter_width:4%;

#content{

@include container();

@include clearfix();

section{

@include column(12);

}

@include generate_grid_positions(section,12);

}

これで、それぞれのブレークポイント内でカラム数が異なるグリッドが実現できます！

プラスαで気をつけたいところ

使っていて少し気になった部分があります。それがclearfixとbox-sizingです。思った見た目にするには割と大事な部分だと思うので、一応…。

clearfixのmixin

Profound Gridにはclearfixのmixinが入っています。が、overflow:hidden;タイプのclearfixなんですよね…。装飾の具合によっては使いにくい場合もあるかと思います。そんな時は、legacy-pie-clearfixというmixinも用意されています。
こちらはafter要素にclear:both;をかけているタイプなので、コンテナからはみ出して装飾したい場合などはこちらを使用した方がいいですよ！

box-sizingの設定

そのままだとpaddingの設定ではみ出したり何だりで、せっかくのグリッドがややこしいことになります。なので、Compassでbox-sizeingを呼び出して、border-boxあたりをきちんと設定してあげるとよろしいかと思います。

@import "compass/css3";
*{
    @include box-sizing(border-box);
}

@import "compass/css3";

@include box-sizing(border-box);

}

まとめ

いかがだったでしょうか？
Foundationも好きなのですが、シンプルにグリッドだけ使いたい場合は、Profound Gridも柔軟で使い勝手が良かったです:) 覚えるmixinとかclassも少ないですし。物覚えが悪い私にぴったり。
最近はグリッドシステムがわんさかしていますが、どれを選べばいいか分からない方の選択肢の一つになればと思います！
それではまた！