CSS Gridを使ってみたい人にぴったり!さまざまなレイアウトをシンプルなHTMLで実装できる -iota

CSS Gridを使ったレスポンシブ対応のレイアウトを簡単に実装できる超軽量フレームワークを紹介します。

シンプルなレイアウトから、複雑なレイアウトまで、ブレイクポイントごとにレイアウトを定義することができます。ブレイクポイントはもちろん、カスタマイズできます。

サイトのキャプチャ

iota
iota -GitHub

iotaの特徴

  • 必要なclassは一つだけ
    このフレームワークで使用するclassは一つだけです。CSS Gridを使ったさまざまなレイアウトを実装するために、いくつかの修飾子が用意されています。
  • 584 bytes
    このフレームワークは超軽量のスタイルシートです。使用しないものを取り除くと、更にファイルサイズは減少します。
  • 無限の柔軟性
    スタイルシートのコードはCSS Gridとそのすべての機能をカスタムプロパティで結合することによってもたらされ、使用されていないclassを無駄にすることなくレイアウトの自由度を確保します。

サポートブラウザ

CSS Gridをサポートする以下のブラウザに対応しています。

  • Edge 16+
  • Firefox 52+
  • Chrome 57+
  • Safari 10.1+
  • Opera 44+

IEをサポートする必要がある場合は、フォールバックを用意する必要があります。

iotaの使い方

Step 1: 外部ファイル

当スタイルシートを外部ファイルとして記述します。

Step 2: 実装

基本となるHTMLです。コンテナに.gridを指定します。

どのようなレイアウトにするかは、CSS変数を使用します。

CSS変数はまとめて、classにして利用することも可能です。

iotaのデモ

iotaを使用して、CSS Gridでどのようにレイアウトを実装するか見てみましょう。

デモのキャプチャ

デモ: 1/9

まずは、コンテナに「.grid」を指定します。

デモのキャプチャ

デモ: 2/9

コンテナに「--cols-lg: 2;」を与えると、lg(1080px)用に2カラムのレイアウトが完成です。iotaではCSS変数を使用して、異なるブレークポイントごとにレイアウトを定義することができます。

デモのキャプチャ

デモ: 3/9

アイテムには独自のカスタムプロパティが用意されており、X軸とY軸の両方向のレイアウトを制御できます。

デモのキャプチャ

デモ: 4/9

各アイテムにスタイルを定義することで、それぞれ独自のスタイルを適用できます。

デモのキャプチャ

デモ: 5/9

「minmax()」を一緒に、「auto-fit」や「auto-fill」を使用すると、ブレークポイントではなくサイズに基づいてアイテムがレイア​​ウトされます。

デモのキャプチャ

デモ: 6/9

アイテム間にスペースを与えて配置するには、「justify-content」と「align-content」を使用します。

デモのキャプチャ

デモ: 7/9

さらに「justify-items」と「align-items」は、グリッド全体のアイテムコンテンツを方向付けできます。

デモのキャプチャ

デモ: 8/9

アイテムのポジションを調整するには、「justify-self」と「align-self」を使用します。

デモのキャプチャ

デモ: 9/9

このように複雑なレイアウトも簡単に指定することができます。

top of page

©2018 coliss