グリッドレイアウトを実装してみる

2016.07.16

自分の勉強用にグリッドレイアウトを実装してみます。
実装方法はいくつかあると思いますが、今回はdisplay: inline-block;を使ってみます。

12分割のグリッド

よくある12分割のグリッドを実装してみます。

HTML

<div class="grid">
	<div class="grid-item grid-item_w6">
		<div>.grid-item_w6</div>
	</div>
	<div class="grid-item grid-item_w6">
		<div>.grid-item_w6</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w3">
		<div>.grid-item_w3</div>
	</div>
	<div class="grid-item grid-item_w3">
		<div>.grid-item_w3</div>
	</div>
	<div class="grid-item grid-item_w3">
		<div>.grid-item_w3</div>
	</div>
	<div class="grid-item grid-item_w3">
		<div>.grid-item_w3</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w2">
		<div>.grid-item_w2</div>
	</div>
	<div class="grid-item grid-item_w5">
		<div>.grid-item_w5</div>
	</div>
	<div class="grid-item grid-item_w5">
		<div>.grid-item_w5</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}

12分割のグリッドのデモページ
　

5・7・8・9・10分割のグリッド

5・7・8・9・10分割のグリッドを実装してみます。

HTML

<div class="grid5">
	<div class="grid-item">
		<div>.grid5</div>
	</div>
	<div class="grid-item">
		<div>.grid5</div>
	</div>
	<div class="grid-item">
		<div>.grid5</div>
	</div>
	<div class="grid-item">
		<div>.grid5</div>
	</div>
	<div class="grid-item">
		<div>.grid5</div>
	</div>
</div>

<div class="grid7">
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
	<div class="grid-item">
		<div>.grid7</div>
	</div>
</div>

<div class="grid8">
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
	<div class="grid-item">
		<div>.grid8</div>
	</div>
</div>

<div class="grid9">
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
	<div class="grid-item">
		<div>.grid9</div>
	</div>
</div>

<div class="grid10">
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
	<div class="grid-item">
		<div>.grid10</div>
	</div>
</div>

CSS

/* 5分割のgrid */
.grid5 {
	font-size: 0;
}
.grid5 .grid-item {
	display: inline-block;
	width: 20%;
	box-sizing: border-box;
	font-size: 16px;
}

/* 7分割のgrid */
.grid7 {
	font-size: 0;
}
.grid7 .grid-item {
	display: inline-block;
	width: 14.286%;
	box-sizing: border-box;
	font-size: 16px;
}

/* 8分割のgrid */
.grid8 {
	font-size: 0;
}
.grid8 .grid-item {
	display: inline-block;
	width: 12.5%;
	box-sizing: border-box;
	font-size: 16px;
}

/* 9分割のgrid */
.grid9 {
	font-size: 0;
}
.grid9 .grid-item {
	display: inline-block;
	width: 11.111%;
	box-sizing: border-box;
	font-size: 16px;
}

/* 10分割のgrid */
.grid10 {
	font-size: 0;
}
.grid10 .grid-item {
	display: inline-block;
	width: 10%;
	box-sizing: border-box;
	font-size: 16px;
}

5・7・8・9・10分割のグリッドのデモページ
　

マージンの設定

12分割のグリッド要素にマージンを設定できるようにしてみます。

HTML

<div class="grid">
	<div class="grid-item grid-item_w5">
		<div>.grid-item_w5</div>
	</div>
	<div class="grid-item grid-item_w5 grid-item_ml2">
		<div>.grid-item_w5 + .grid-item_ml2</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w8">
		<div>.grid-item_w8</div>
	</div>
	<div class="grid-item grid-item_w3 grid-item_ml1">
		<div>.grid-item_w3 + .grid-item_ml1</div>
	</div>
</div>

<div class="grid">
	<div class="grid-item grid-item_w3">
		<div>.grid-item_w3</div>
	</div>
	<div class="grid-item grid-item_w5 grid-item_ml1">
		<div>.grid-item_w5 + .grid-item_ml1</div>
	</div>
	<div class="grid-item grid-item_w2 grid-item_ml1">
		<div>.grid-item_w2 + .grid-item_ml1</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}
.grid-item_ml12 {
	margin-left: 100%;
}
.grid-item_ml11 {
	margin-left: 91.667%;
}
.grid-item_ml10 {
	margin-left: 83.333%;
}
.grid-item_ml9 {
	margin-left: 75%;
}
.grid-item_ml8 {
	margin-left: 66.667%;
}
.grid-item_ml7 {
	margin-left: 58.333%;
}
.grid-item_ml6 {
	margin-left: 50%;
}
.grid-item_ml5 {
	margin-left: 41.667%;
}
.grid-item_ml4 {
	margin-left: 33.333%;
}
.grid-item_ml3 {
	margin-left: 25%;
}
.grid-item_ml2 {
	margin-left: 16.667%;
}
.grid-item_ml1 {
	margin-left: 8.3333%;
}

マージンの設定のデモページ
　

ガター

3パターンのガターを設定できるようにしてみます。

HTML

<div class="grid grid-gutter_s">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
</div>

<div class="grid grid-gutter_m">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
</div>

<div class="grid grid-gutter_l">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}
.grid-gutter_s > .grid-item {
  padding-left: 5px;
  padding-right: 5px;
}
.grid-gutter_m > .grid-item {
  padding-left: 10px;
  padding-right: 10px;
}
.grid-gutter_l > .grid-item {
  padding-left: 15px;
  padding-right: 15px;
}

ガターのデモページ
　

ガターの左右の余白削除

ガター設定時に左右の余白をなくすようにしてみます。

HTML

<div class="grid grid-gutter_s">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_s + .grid-item_w4</div>
	</div>
</div>

<div class="grid grid-gutter_m">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_m + .grid-item_w4</div>
	</div>
</div>

<div class="grid grid-gutter_l">
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-gutter_l + .grid-item_w4</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}
.grid-gutter_s {
  margin-left: -10px;
}
.grid-gutter_s > .grid-item {
  padding-left: 10px;
}
.grid-gutter_m {
  margin-left: -20px;
}
.grid-gutter_m > .grid-item {
  padding-left: 20px;
}
.grid-gutter_l {
  margin-left: -30px;
}
.grid-gutter_l > .grid-item {
  padding-left: 30px;
}

ガターの左右の余白削除のデモページ
　

上下位置の設定

グリッド要素の上下位置を設定できるようにしてみます。

HTML

<div class="grid grid-vertical_t">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4<br />.grid-item_w4<br />.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

<div class="grid grid-vertical_m">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4<br />.grid-item_w4<br />.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

<div class="grid grid-vertical_b">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4<br />.grid-item_w4<br />.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}
.grid-vertical_t .grid-item {
	vertical-align: top;
}
.grid-vertical_m .grid-item {
	vertical-align: middle;
}
.grid-vertical_b .grid-item {
	vertical-align: bottom;
}

上下位置の設定のデモページ
　

左右の並びの設定

グリッド要素の左右の並びを設定できるようにしてみます。

HTML

<div class="grid grid-align_l">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

<div class="grid grid-align_c">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

<div class="grid grid-align_r">
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
	<div class="grid-item grid-item_w4">
		<div>.grid-item_w4</div>
	</div>
</div>

CSS

/* 12分割のgrid */
.grid {
	font-size: 0;
}
.grid-item {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
}
.grid-item_w12 {
	width: 100%;
}
.grid-item_w11 {
	width: 91.667%;
}
.grid-item_w10 {
	width: 83.333%;
}
.grid-item_w9 {
	width: 75%;
}
.grid-item_w8 {
	width: 66.667%;
}
.grid-item_w7 {
	width: 58.333%;
}
.grid-item_w6 {
	width: 50%;
}
.grid-item_w5 {
	width: 41.667%;
}
.grid-item_w4 {
	width: 33.333%;
}
.grid-item_w3 {
	width: 25%;
}
.grid-item_w2 {
	width: 16.667%;
}
.grid-item_w1 {
	width: 8.3333%;
}
.grid-align_l {
	text-align: left;
}
.grid-align_c {
	text-align: center;
}
.grid-align_r {
	text-align: right;
}

左右の並びの設定のデモページ
　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年10月
日 月 火 水 木 金 土
 1234
567891011
12131415161718
19202122232425
262728293031