Sassでinline-blockをベースにしたグリッドシステムを作成する

グリッドシステムといえばBootstrapやFoundationがよく使われていると思いますが、csswizardry (Harry Roberts)が公開しているcsswizardry-gridsが使い勝手がよさそうだったので、それをベースにグリッドシステムを作ってみました。

sponsored link

demo

See the Pen Grid layout class-name custom by ManabuYasuda (@gaku) on CodePen.

CODE PENで作成したデモです。ブレイクポイントを768px以上に指定しているので、PCで確認してください。

変数を定義する

Sassの特徴のひとつは変数を使用できる点です。今回定義している変数から重要なところをピックアップします。

ベーススタイルとmodifierを指定する

グリッドシステムに使用するスタイルを指定します。このグリッドシステムはfloatではなくinline-blockを使用しているので、floatやclearfixの指定はありません。inline-blockは要素を並べた時に要素間に余白ができてしまいます。これに関してはfont-sizeプロパティを使用しています。そのため<html>に対してページのベースになるfont-sizeをpxで指定しておく必要があります。max-widthとremを使用しているのでIE9以上になります。

modifierクラスを指定します。モディファイアというのはベーススタイルのバージョン違いです。余白や縦位置の指定、カラムを左右に移動させるクラスなどがあります。個人的にinline-blockをベースにしたグリッドシステムはvertical-alignの指定ができたり、高さの違うカラムでもレイアウトが崩れないのが利点なのかなと思っています。詳しくはdemoを確認してください。

pushとpullクラスはこの後にwidthを指定するクラスをif文で生成します。

メディアクエリ用の@mixinを作成する

レスポンシブ対応のグリッドシステムにするためにメディアクエリを指定します。Sassには@mixinと@contentという機能があり、ブレイクポイントなどの管理が変数でできるようになります。

@ifでクラスを生成する

グリッドのwidth指定は8÷12×100%=66.66667%のように指定するカラム数を合計のカラム数で割ってパーセンテージに計算します。これをSassの@mixinと@ifというif文の機能を使って自動で計算させてクラスを生成します。さいごの@include grid-setup;でメディアクエリなしのクラスを生成しています。

メディアクエリ用に作成しておいた@mixinを使ってブレイクポイントごとにクラスを生成します。grid-setupという@mixinの引数$media-classに定義しておいた変数を指定することでクラス名を付け足します。

これで以下のようなクラスが生成されます。

マークアップ

グリッドシステムをマークアップする方法です。rowクラスの中にgridクラスを指定します。

3カラムの場合はメインコンテンツを真ん中に配置するため、pushとpullクラスで移動させます。pushでメインコンテンツを右に、pullでサイドバーを左に動かします。左サイドバーの2カラムも同じ要領で指定できます。


もとになるソースコードはGitHubで公開しています。修正をしている可能性があるので、必ずしも同じではない点に注意してください。Sassは色んなことができるのでおもしろいですね!

さいごに参考にしたソースコードを紹介します。