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

2016.07.16

HTML・CSS

自分の勉強用にグリッドレイアウトを実装してみます。
実装方法はいくつかあると思いますが、今回は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;
}

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

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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

12分割のグリッド

HTML

CSS

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

HTML

CSS

マージンの設定

HTML

CSS

ガター

HTML

CSS

ガターの左右の余白削除

HTML

CSS

上下位置の設定

HTML

CSS

左右の並びの設定

HTML

CSS

コメントを残すコメントをキャンセル

Category

Tag

Recent

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

12分割のグリッド

HTML

CSS

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

HTML

CSS

マージンの設定

HTML

CSS

ガター

HTML

CSS

ガターの左右の余白削除

HTML

CSS

上下位置の設定

HTML

CSS

左右の並びの設定

HTML

CSS

関連記事

スライダーの実装でアクセシビリティを意識する

Yu Gothic UIで「」が重なって表示される

CSSの:not()で複数の条件を指定する

CSSでslideDownを実装する

タブの実装でアクセシビリティを意識する

コメントを残す コメントをキャンセル

Category

Tag

Recent

コメントを残すコメントをキャンセル