8-Grid

8-Gridは軽量・シンプルなレスポンシブ対応のCSSグリッドフレームワークです。

最新バージョン:0.3


Star

8-Gridとは

8-Gridは、グリッドレイアウトで12等分してもそんなに細分化しないやろw
という考えのもと、8つにしたらどうだろう…ということで作ったものです。
PC/タブレット/スマホの三種類のクラスを持っており、各対応ごとにCSSファイルを分けることもできます。

特徴

超軽量

v0.3のall.min.cssのgzip後容量はわずか0.2kBほど(254B)となっており、あなたのサイトの高速化に寄与します。
また、他の主要グリッドフレームワークと比べても軽量であることが分かります。(下表参照)

シンプル

ほかの様々なグリッドCSSと同じようなクラス名を使用。学習コストをかけることなくスムーズに利用を開始できます。

レスポンシブ対応

タブレット・スマホ用CSS(*)完備。特別な用意をわざわざする必要はありません。
*-各ブレークポイントは以下の通りです。
タブレット:768px~1024px
スマホ:~767px

主要CSSグリッドフレームワークとの比較(checkgzipcompression.comでgzip後サイズを比較)
フレームワーク名 公式サイト gzip後サイズ
Milligrid https://bencoveney.github.io/Milligrid/ 786B
Simple-Grid https://www.simplegrid.io/ 635B
iota http://korywakefield.com/iota/ 584B
8-Grid https://kikiriko200.github.io/8-Grid/ 262B

ダウンロード

CDN(jsdelivr)

最新バージョン:v0.3

			全種類用CSS(3分割追加済み)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.all.min.css">
全種類用CSS(3分割追加なし)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.notall.min.css">
PC用CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.pc.min.css">
タブレット用CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.tb.min.css">
スマホ用CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.sp.min.css">
3分割追加用CSS
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kikiriko200/8-Grid@v0.3/css/8grid.add.min.css">

		

CDN(rawgit)

最新バージョン:v0.3

			全種類用CSS(3分割追加済み)
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.all.min.css">
全種類用CSS(3分割追加なし)
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.notall.min.css">
PC用CSS
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.pc.min.css">
タブレット用CSS
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.tb.min.css">
スマホ用CSS
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.sp.min.css">
3分割追加用CSS
<link rel="stylesheet" href="https://cdn.rawgit.com/kikiriko200/8-Grid/adf9b37/css/8grid.add.min.css">
			
		

GitHub

zipDL:こちら

tar.gzDL:こちら

使い方

このグリッドレイアウトでは画面が8等分されます。
そのため、各カラムの合計値は常に8にしてください。
また、.v960を指定すると、このように960px幅を100%とします。

960pxサンプル

.col-8
.col-1
.col-7
.col-2
.col-6
.col-3
.col-5
.col-4
.col-4
.col-5
.col-3
.col-6
.col-2
.col-7
.col-1
.col-8

また、当然ながら要素のすべての幅を使って動かすことも出来ます。
これはとても簡単で、.rを指定するだけです。

100%サンプル

.col-8
.col-1
.col-7
.col-2
.col-6
.col-3
.col-5
.col-4
.col-4
.col-5
.col-3
.col-6
.col-2
.col-7
.col-1
.col-8

また、このcssはタブレットにも対応しています。
これの対応もとても簡単で、.col-m-を指定するだけです。

タブレット表示サンプル

.col-1
.col-7
.col-m-8
.col-m-1
.col-m-7
.col-m-2
.col-m-6
.col-m-3
.col-m-5
.col-m-4
.col-m-4
.col-m-5
.col-m-3
.col-m-6
.col-m-2
.col-m-7
.col-m-1
.col-m-8

また、このcssはスマートフォンにも対応しています。
これの対応もとても簡単で、.col-s-を指定するだけです。

スマホ表示サンプル

.col-1
.col-7
.col-s-8
.col-s-1
.col-s-7
.col-s-2
.col-s-6
.col-s-3
.col-s-5
.col-s-4
.col-s-4
.col-s-5
.col-s-3
.col-s-6
.col-s-2
.col-s-7
.col-s-1
.col-s-8

また、以上で紹介したクラスは複合して用いることで、より高度な表現が可能になります。
以下に例を示します。

PC/タブレット時のみ両端にサイドバーを置くタイプの3カラムレイアウト

.col-2,.col-m-2
.col-4,.col-m-4
.col-2,.col-m-2

この場合、.col-s-を指定していないので、スマホからは1カラムに見えます。

等幅3カラムレイアウト

.col-1-3,.col-m-1-3
.col-1-3,.col-m-1-3
.col-1-3,.col-m-1-3

これは特殊な例です。見ての通り、.col-1-3というクラスを使用しています。
最初に書いた各カラムの合計値は常に8という原則に反しますが、8-Gridではどうやっても3等分できないのでこのように特殊クラスを使います。
以下がその部分のCSSです。

			/*CSS*/
.col-1-3{
	width:calc(100% / 3);
}
.col-2-3{
	width:calc(100% / 3 * 2);
}