IE限定？グリッドレイアウトを使う

2015年11月9日

グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイアウト方法のことです。今まではposition,floatプロパティを利用してコンテンツを配置しましたが、グリッドレイアウトを利用することでより柔軟なレイアウトが可能になります。

使い方は、要素の種類を指定するdisplayプロパティに「grid」、「inline-grid」を指定することで、その要素内でグリッドレイアウトを使用可能となります。
「display:grid」、「display:inline-grid」が指定された要素の事をグリッド要素と言います。

サンプルコードの実行結果はこちら

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<title>グリッドレイアウトを使ってみる</title>
	<style>
	.container{
		width:500px;
		height:240px;
		border:2px solid black;
		display:-ms-grid;
		-ms-grid-columns:50px 150px 250px;
		-ms-grid-rows:60px 180px;
	}

	.bgRed   {background-color:red;}
	.bgYellow{background-color:yellow;}
	.bgPink  {background-color:pink;}
	.bgSkyblue{background-color:skyblue;}
	.bgOrange {background-color:orange;}

	.r1c1{-ms-grid-row:1;-ms-grid-column:1;}
	.r1c2{-ms-grid-row:1;-ms-grid-column:2;}
	.r1c3{-ms-grid-row:1;-ms-grid-column:3;}
	.r2c1{-ms-grid-row:2;-ms-grid-column:1;}
	.r2c2{-ms-grid-row:2;-ms-grid-column:2;}
	.r2c3{-ms-grid-row:2;-ms-grid-column:3;}
	</style>
</head>
<body>
	<div class="container">
		<div class="r1c1 bgRed">1</div>
		<div class="r1c2 bgYellow">2</div>
		<div class="r1c3 bgPink">3</div>
		<div class="r2c1 bgSkyblue">4</div>
		<div class="r2c2 bgOrange">5</div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>グリッドレイアウトを使ってみる</title>

<style>

.container{

width:500px;

height:240px;

border:2px solid black;

display:-ms-grid;

-ms-grid-columns:50px 150px 250px;

-ms-grid-rows:60px 180px;

}

.bgRed {background-color:red;}

.bgYellow{background-color:yellow;}

.bgPink {background-color:pink;}

.bgSkyblue{background-color:skyblue;}

.bgOrange {background-color:orange;}

.r1c1{-ms-grid-row:1;-ms-grid-column:1;}

.r1c2{-ms-grid-row:1;-ms-grid-column:2;}

.r1c3{-ms-grid-row:1;-ms-grid-column:3;}

.r2c1{-ms-grid-row:2;-ms-grid-column:1;}

.r2c2{-ms-grid-row:2;-ms-grid-column:2;}

.r2c3{-ms-grid-row:2;-ms-grid-column:3;}

</style>

</head>

<body>

</div>

</body>

</html>

グリッド要素

グリッドのコンテナ(入れ物)となる要素です。displayプロパティの値を「grid」か「inline-gird」を指定したとき、要素がグリッド要素となります。

グリッドトラック

grid-columnsプロパティとgrid-rowsプロパティで定義される列と行の名前というか
総称です。

グリッドライン

グリッド要素を列や行に分割する線です。grid-columnsとかgrid-rowsプロパティで値を設定すると、グリッド要素内にグリッドラインが挿入されて、列や行が定義されます。グリッドラインはブラウザでは目視できません。

グリッドセル

分割された個々のマス目のことです。コンテンツはこのグリッドセルに置いていきます。

グリッドアイテム

グリッドセルに配置されるようです。グリッド要素の子要素がグリッドアイテムです。