レイアウトも自由自在！CSSグリッドベースのフレームワーク4選

更新日: 2018年05月25日

素材サイト

CSSグリッドを使ったレイアウト手法が主流になりつつありますが、どうも複雑に感じてしまう人もいるのではないでしょうか。

これまでフレームワークを使ってレイアウトをしていた人にとっては、用意されたclassを設定するだけである程度綺麗なレイアウトが完成できるというのは、非常に魅力的だったはずです。

それなら、CSSグリッドを使ったフレームワークを使ってみるのはいかがでしょうか。

今回は、CSSグリッドベースのフレームワークをご紹介します。実際には、CSSグリッド自体がこれまでのフレームワークの乱立を阻止するために生まれたものなので、CSSグリッドを使ったフレームワークはほとんどないのが現状ですが、CSSグリッドレイアウトに慣れるまではフレームワークを使ってみるのもいいでしょう。

CSSグリッドとは

CSSグリッドは、HTMLやCSSを使って簡単に2次元レイアウトを表現することのできる、CSS3の新しい機能のことです。

CSSグリッドが登場するまで人気だったFlexboxを使ったレイアウトは回り込みを駆使しながら1次元的に段組を行うレイアウトでしたが、CSSグリッドの登場で、格子状のマス目に好きな順番でコンテンツを配置したり、マス目を結合したりすることができます。

参考：
これで分かった！10分でほとんど理解できる「CSSグリッド」の基礎

基本的な考え方をマスターできれば、デザインの自由度は格段に高まります。しかし、あらかじめ使いやすいようにテンプレートが用意されていたほうがデザインしやすい、という人もいるでしょう。そんな方には、フレームワークを使うのがオススメです。

CSSグリッドを使ったフレームワークはまだ多いとは言えませんが、少しずつ登場してきています。今回は、すでに登場した4つのフレームワークをご紹介します。ぜひ自分にとって使いやすいフレームワークを選んでみましょう。

レイアウトも自由自在！CSSグリッドベースのフレームワーク4選

1. iota

iotaは、親要素であるグリッドコンテナーだけにクラス名*「grid」を付すだけですぐに使うことができる、シンプルなレスポンシブ対応のCSSグリッドベースのフレームワークです。容量もたったの584バイト*と非常に小さく、読み込み速度も速いのが特徴です。

CSSグリッドに特徴な複雑なブレイクポイントの設定も非常に簡単です。親グリッドに設定されたプロパティは子のグリッドにも継承されるので、たくさんのプロパティを設定する必要もありません。

また、カスタムパターンを一度作ってしまえば、あとは何度でも使い回すことができます。例えば、

.custom {
　　--cols-lg: 3;
　　--cols-xl: 3;
}

というカスタムパターンを作成すれば、

<div class="grid custom">
　　<!-- グリッドアイテム —>
</div>

といったように、再利用することができます。

デザインルールも非常にシンプルで、学習コストがほとんどかからないのが魅力的です。プロパティのルールも非常に単純化されているので、ぜひ一度使ってみましょう。

2. Simple Grid

Simple Gridはその名が体現するように非常にシンプルなCSSグリッドベースのフレームワークです。

Simple Gridは通常のCSSグリッドのイメージとは違って、従来のグリッドシステムと同じように960pxで12カラムの縦のグリッドを組み合わせていきます。そのため、縦同士で並んでいるグリッドを連結させるといった複雑な動作はできませんが、従来のグリッドシステムに慣れている場合は使い方がほとんど同じなので、すぐに使い方を学習し終わるでしょう。

コンテナには「container」クラスを付し、行には「row」、列には「col-●」をつけるだけです。1行は12カラム構成なので、数字は足して12にする必要があります。

<div class="container">
　　<div class="row">
　　　　<div class="col-3">
　　　　</div>
　　　　<div class="col-3">
　　　　</div>
　　　　<div class="col-6">
　　　　</div>
　　</div>
</div>

もしかしたら、これではCSSグリッドの恩恵を受けていないのではと感じているデザイナーの方もいるでしょう。しかし、Flexboxを使ったグリッドのフレームワークを使っている場合は、Simple Gridに移植しやすいようです。