Gridとは?floatを使わずに要素を並べる新しいレイアウト方法ナナミ2018/6/42018/11/27こんにちは!ライターのナナミです。みなさん、グリッドレイアウトってご存知ですか?こんな風に、コンテンツがタイル状に配置されているレイアウトです。目に入ってくる情報が多くて楽しいですね!でもなんか作るの難しそう...と思った方も多いのではないでしょうか?実はこのグリッドレイアウト、CSSで簡単に実装できちゃうんです。Gridについて解説をしていきます。この記事は下記の流れで進めていきます。Gridを使ったレイアウト例グリッドレイアウトは最近人気のあるレイアウトです。まとめグリッドレイアウトとは?グリッドレイアウトとは、この画像のように積み木のように並べた感じのレイアウトです。要素は基本的に四角形で配置されています。グリッドレイアウトとはその要素の大きさや位置を、グリッド線というものを基準に決めています。こんな感じで、マス目のように区切っているのがグリッド線です。これに合わせて、要素を配置していきます。グリッド線を基準にレイアウトするので、グリッドレイアウトと言うわけですね。Gridとはどのような仕組みのものなのでしょうか。細かく見ていきましょう。親要素にdisplay:gridをつけることで、グリッドレイアウトで並べることができます。要素を横並びにさせる時、floatとかを使いますよね。あれは縦一列に並んでいる要素を、隣に回り込ませて実装しています。針金で繋がっている箱を、針金を曲げて配置しているような感じです。これを1次元レイアウトと言います。グリッドレイアウトでは、2次元レイアウトを採用しています。箱が針金で繋がっているのではなく、箱ごとに独立しているのを、ぽんぽん置いて配置している感じになります。大きさが違うレイアウトでも、綺麗に並んでくれるのです。対応ブラウザIE11とIE10にはベンダープレフィックス(プロパティの頭に-ms-とつけるやつ)が必要です。IE9以前は使えもしません。使う際にはちょっと注意が必要な手法です。ベンダープレフィックスってなんだっけ?という方はリファレンスを参照してみてください。Gridならではの用語について解説しますね。Gridを指定している一番大きな枠、つまり親要素のことです。この中にある子要素が、次の項目で説明するグリッドアイテムになります。グリッドアイテムグリッドコンテナの中にある子要素のことです。配置されるコンテンツそのものですね。グリッドライン配置の基準となるグリッド線のことです。他にも細かい用語があるのですが、ひとまず上の3つがわかれば大丈夫です。補足として紹介しておきますね。グリッドラインの間、要素が配置される位置のことです。縦のライン、横のラインのまとまりです。グリッドセルとほぼ同じですが、複数のグリッドセルのまとまりも指します。グリッドトラックの間にある空白スペースです。細かいところはリファレンスなどを参照してください。Gridの使い方を解説していきますよ。今回はこんな感じに用意した要素を、グリッドレイアウトで並べていきます。*/}グリッドコンテナを作るまずは親要素にdisplay:gridを指定して、グリッドコンテナを作ります。*/}まだこの時点では何も起きませんね。グリッドラインを決めるグリッドレイアウトのキモ、グリッドラインを定義していきます。縦の線はgrid-template-columns、横の線はgrid-template-rowsで定義できます。grid-template-rows:要素を配置するエリアの高さ;}配置エリアの大きさはftという単位で指定します。親要素を基準とした割合を算出し、幅や高さを決めてくれます。単純に、数値が大きければ幅が広くなり、小さければ小さくなるという風に覚えておけばOKです。今回は幅が広いエリアを真ん中に、小さめのエリアを左右に配置してみましょう。*/}画面に変化が出ましたね!指定した配置エリアに沿って並んでいます。配置を調整する最後に、各コンテンツの配置を調整していきます。各子要素、フレックスアイテムにgrid-columnとgrid-rowを指定します。grid-row:縦の開始位置/縦の終了位置;}grid-columnが横の位置、grid-rowが縦の位置の指定です。「/(スラッシュ)」の前の数値が要素の開始位置、後ろの数値が要素の終了位置になります。ここでポイントなのは、数値は配置エリアではなく、グリッドラインが何本目かを表している点です。*/}このような記述になります。*/}できました!ブログなどでよく使われるレイアウトですね。Gridを使えば、こんなレイアウトも簡単にできちゃいます。Gridなら簡単!位置ズレも起きなくて安心です。*/}おしゃれな情報サイトなんかで見かけるレイアウトですね。タイル状に所狭しと並んだコンテンツが、無駄なく情報を表示してくれます。Grid、面白いレイアウトが色々できますね!オールドブラウザでは使えないのが難点ですが、今後活躍していくこと間違いなしな手法です。覚えて、グリッドレイアウトを活用していってください!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。フリーターを経てフロントエンジニアになる。jQueryなどのコーディングやCMS設計に従事。文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。体は日本酒でできている。