CSS

【CSS Grid Layout】グリッドレイアウトの超簡単な作り方(IE11も対応)

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

gridはグリッドレイアウトが設計できるCSSプロパティです。
各ブラウザ対応が懸念され、なかなか踏み込みにくい印象のgridですが手軽にグリッドレイアウトが実現可能です。今回はIE11の対応も含めサンプル付きで解説していきます。

最終的に以下のようなグリッドレイアウトを作成する想定で解説します。

HTMLの設定

グリッドコンテナとなる親要素はwrap_gridで囲み、item1~item5を子要素( グリッド )とします。

<div class="wrap_grid">
	<div class="item1">1</div>
	<div class="item2">2</div>
	<div class="item3">3</div>
	<div class="item4">4</div>
	<div class="item5">5</div>
</div><!-- wrap_grid -->

親要素の設定

グリッドコンテナ親要素のwrap_gridに以下を設定します。
display: grid;にします。

grid-template-columnsカラムの幅や割合を設定します。

.wrap_grid{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

grid-template-columns: 1fr 1fr 1fr; で三等分にされます。
他に以下のような書き方でもOKです。

grid-template-columns: 33.33%, 33.33%, 33.33%;
grid-template-columns: repeat(3, 1fr);

子要素(グリッド)の設定

grid-rowで行のエリアを指定、grid-columnで列のエリアを指定できます。
エリアはグリッド線を基準として
grid-row: 【グリッドの開始位置】/ 【グリッドの終了位置】 ;
のように指定します。

以下では.item1(紫)の行エリアの指定とitem2(ピンク)の列エリアの指定をしています。

.wrap_grid .item1{
	background: #c881ff;
	grid-row: 1/3;
}
.wrap_grid .item2{
	background: #ffa1c0;
	grid-column: 2/4;
}

.item4と.item5にも同じようにエリア指定を付けます。

.wrap_grid .item4{
	background: #6ce9ff;
	grid-column: 1/3;
}
.wrap_grid .item5{
	background: #9381ff;
	grid-row: 2/4;
	grid-column: 3/4;
}

こちらで IE対応を除く基本的な設定は終了です。

サンプル

IEに対応するにはIE用のベンダープレフィックスが必要です。
以下のサイトからIE用のベンダープレフィックスを自動育成してくれるツールを使用します。

以下の手順で対応させます。

IEではcolumnとrowの設定ではどちらかを省略することができないので上記のcssの体裁を少し整える必要があります。

親要素ではgrid-template-columns: 1fr 1fr 1fr;のみの設定でしたが
grid_template-rows: auto auto auto;も設定しておきます。

子要素も同じようにgrid-columngrid-rowを設定します。

.wrap_grid{
	display: grid;
	grid-template-columns:  1fr 1fr 1fr;
	grid_template-rows: auto auto auto;
}
.wrap_grid div{
	text-align: center;
	color: #FFF;
	font-size: 200%;
	padding: 100px 0;
}
.wrap_grid .item1{
	background: #c881ff;
	grid-column: 1/2;
	grid-row: 1/3;
}
.wrap_grid .item2{
	background: #ffa1c0;
	grid-column: 2/4;
	grid-row: 1/2
}
.wrap_grid .item3{
	background: #6cffd4;
	grid-column: 2/3;
	grid-row: 2/3;
}
.wrap_grid .item4{
	background: #6ce9ff;
	grid-column: 1/3;
	grid-row: 3/4;
}
.wrap_grid .item5{
	background: #9381ff;
	grid-row: 2/4;
	grid-column: 3/4;
}

このようにrowとcolumnの設定を記述します。

IE用のベンダープレフィックスを自動で付与してくれるオンラインツールで変換します。

Autoprefixer CSS online

左側にCSSを張り付けると自動でIE対応CSSが育成されます。
他のブラウザも問題なく見れます。

サンプルIE11で見てください

今回は基本的な使い方のみの解説でした。IE対応については記述の仕方が結構違うので覚えるよりも変換することをお勧めします。

2021.3時点では勧告候補なので実践で使用する際は確認しておいたほうがよいでしょう。

uhaha

場合によってはflexのほうが適しているときもあるのでうまく使い分けできたらよいです。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*