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

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

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

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

CSSグリッドとは

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

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

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

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

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

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

1. iota

1.png

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

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

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

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

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

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

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

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

2. Simple Grid

2a.png

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

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

2b.png

コンテナには「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に移植しやすいようです。

3. Milligrid

c.png

Milligridは、MilligramというFlexboxを使ったフレームワークを利用した、レスポンシブ対応のCSSグリッドシステムです。ほとんどがFlexboxベースになっていますが、ネストしてカラムを表示することもできます。

Sassによる設定も可能になっており、いくつかのmixinも用意されています。ブレイクポイントを自分の好みに設定したり、幅を変えたりすることも可能です。

4. Web Grid

d.png

Web Gridはfloatやflexを一切使っていない、CSSグリッドを活用したフレームワークです。他のフレームワークと同様に軽量で、非常にシンプルなのが特徴です。

先ほど紹介したSimple Gridと同様に、Web Gridも12グリッドで組み立てる形式のフレームワークになります。CSSファイルのサイズは1KBを切るほど軽量なので、使ってみる価値は大いにあるでしょう。

まとめ

今回はCSSグリッドを使ったフレームワークをご紹介しましたが、そもそもFlexboxとは思想が異なるので、状況によって使い分けてみてもよいでしょう。

ぜひ、自分のデザイン目的にあったフレームワークを見つけてみてください。

参考:
Flexboxでグリッドデザインを実装できるCSSフレームワーク15選