レスポンシブに対応したグリッドレイアウトのフレームワーク作ってみた

レスポンシブに対応したグリッドレイアウトのフレームワーク作ってみた

表題のとおり作ってみました。レスポンシブで、大枠の段組みだけではなく、ちょっとしたレイアウトでも使えるフレームワークあったらいいな〜と思うことが最近あったので、試しに作ってみようかなと。

Ads

なんで作ってみようかと思ったのか

一番の理由は勉強のためですね。sassの。最近いろんなフレームワークのCSSやらSassやらを見ていて、「あーこんな感じで作ってるのか」とか、「このコードは参考になるな」とか発見がありました。それらを参考に作ってみようと思ったのがきっかけでした。

作る際に思ったのが、とりあえずIE8は捨てようでした。シェア数は年々減ってきていますし、レスポンシブに対応するのも基本的にはIE9以降ですもんね。

とゆうことは使えるのが、「display: inline-block;」ですよね。今回のこのフレームワークは「float」を使っていません。
なので、ボックスのセンター揃えが「text-align: center;」でできちゃいます。簡単ですね〜

ダウンロードはこちら

こんなフレームワークです

  • 軽量
  • レスポンシブ対応
  • sassでできている
  • IE9〜使える

基本的にこんな感じのフレームワークです。

対応ブラウザ

  • Chrome 最新
  • firefox 最新
  • safari 最新
  • IE9以上

ダウンロードはこちら

使い方

まずはCSSの読み込み。同梱されている「grid_layout.css」を読み込んでください。

<link rel="stylesheet" href="css/grid_layout.css">

Grid Size 基本

「grid」の幅を12分割した「grid__col–1」が最小単位です。この最小単位であるcolを基準にしてレイアウトを行います。

注意しなければいけないのが、「grid__col–数字」の数字部分の合計が12を超えてはいけません。例えば、「grid__col–7」「grid__col–6」の組み合わせは合計が13になってしまうのでレイアウトが崩れてしまいます。

<div class="grid">
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
	<div class="grid__col grid__col--1">col</div>
</div>

2カラム レイアウト

<div class="grid">
	<div class="grid__col grid__col--6">col</div>
	<div class="grid__col grid__col--6">col</div>
</div>

3カラム レイアウト

<div class="grid">
	<div class="grid__col grid__col--4">col</div>
	<div class="grid__col grid__col--4">col</div>
	<div class="grid__col grid__col--4">col</div>
</div>

4カラム レイアウト

<div class="grid">
	<div class="grid__col grid__col--3">col</div>
	<div class="grid__col grid__col--3">col</div>
	<div class="grid__col grid__col--3">col</div>
	<div class="grid__col grid__col--3">col</div>
</div>

6カラム レイアウト

<div class="grid">
	<div class="grid__col grid__col--2">col</div>
	<div class="grid__col grid__col--2">col</div>
	<div class="grid__col grid__col--2">col</div>
	<div class="grid__col grid__col--2">col</div>
	<div class="grid__col grid__col--2">col</div>
	<div class="grid__col grid__col--2">col</div>
</div>

これら以外にも「grid__col–数字」の組み合わせで好きなレイアウトができます。

Grid gutters マージンあり

「grid–gutters」を付与することで、カラムに対してマージンを付けることができます。

<div class="grid grid--gutters">
	・・・
</div>

align 左右揃え

「grid__col」はdisplay:inline-block;なので文字と同じように右揃えや中央揃えができます。

Grid right

<div class="grid grid--right">
	・・・
</div>

Grid center

<div class="grid grid--center">
	・・・
</div>

Grid justify 均等揃え

均等揃えも可能です。

<div class="container">
	<div class="grid grid--gutters grid--justify">
		<div class="grid__col grid__col--2"><div class="box">col</div></div>
		<div class="grid__col grid__col--6"><div class="box">col</div></div>
		<div class="grid__col grid__col--2"><div class="box">col</div></div>
	</div>
</div>

Grid offset オフセット

要素のあとに指定col分の隙間を付与できるので、より自由にレイアウトできます。

<div class="container">
	<div class="grid grid--gutters">
		<div class="grid__col grid__col--2 grid__offset--2"><div class="box">col</div></div>
		<div class="grid__col grid__col--6"><div class="box">col</div></div>
		<div class="grid__col grid__col--2"><div class="box">col</div></div>
	</div>
</div>

Grid vertical-align 縦揃え

コンテンツの高さが違うものの縦揃えを指定してレイアウトできます。

Grid top

<div class="container">
	<div class="grid grid--gutters grid--top">
		<div class="grid__col grid__col--4">
			<div class="box">col<br>content<br>content</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
	</div>
</div>

Grid middle

<div class="container">
	<div class="grid grid--gutters grid--middle">
		<div class="grid__col grid__col--4">
			<div class="box">col<br>content<br>content</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
	</div>
</div>

Grid bttom

<div class="container">
	<div class="grid grid--gutters grid--bttom">
		<div class="grid__col grid__col--4">
			<div class="box">col<br>content<br>content</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
		<div class="grid__col grid__col--4">
			<div class="box">col</div>
		</div>
	</div>
</div>

Grid nestd ネスト

ネストすることも可能です。組み合わせることで、よくある左にロゴ、右にグローバルナビのレイアウトもできます。

<div class="container">
	<div class="container grid">
		<div class="grid__col grid__col--2 grid__offset--2">
			<div class="box">col</div>
		</div>
		<div class="grid__col grid__col--8">
			<div class="box">
				<div class="grid grid--right">
					<div class="grid__col"><div class="box">col1</div></div>
					<div class="grid__col"><div class="box">col2</div></div>
					<div class="grid__col"><div class="box">col3</div></div>
				</div>
			</div>
		</div>
	</div>
</div>

カスマイズ

scss/_configs.scss内の変数を変更することでカスタマイズが可能です。たとえば、12カラムを16カラムにしたり、ブレークポイントを変更したりできます。ある程度の知識が必要なのでSassを使ったことがない方は、最初は触らない方がいいかもです。

$var-breakpoint:				768px;
$var-col:						12;
$var-max-width:					100%;
$var-col-gutters:				2%;

ダウンロードはこちら

おわりに

とりあえず今回はこれでブログの記事にしましたが、知っての通りGitHubに公開をしているので、気になったとこや修正点は随時対応していこうかなと思っています。より使いやすいグリッドレイアウトフレームワークにできるようにしたいですね。

いいなと思ったらシェアお願いします

Ads

同じカテゴリーの記事

ページの先頭へ