概要
長い間、Windows OSに標準で付いていたInternet Explorer （通称 IE）。
マイクロソフト社が2022年6月15日IEのサービス終了を発表しました。
それに伴い、多くのWebサービスを開発している企業・個人が
今までIEにも対応しないといけないからと使うのを躊躇していたCSSプロパティを
勉強しはじめたと思います。
僕もその1人です。
この記事では、IEのサービス終了を機によく使われるようになるであろうGrid Layoutの特徴と具体的な使い方について。
Grid Layout とは何か
Grid Layoutは、列と行を定義する水平線と垂直線の集合が交差したものをCSSで表現したものになります。
【Grid Layoutの基本形】
See the Pen Untitled by でぐぅー | Qiita (@sp_degu) on CodePen.
- グリットに置くアイテムの親要素(.wrapper)に
display: gridを入力する - グリッドレイアウトの列数（
grid-template-columns）・行数(grid-template-rows)・カラムの大きさを決める
grid-template-columnsは、 列のwidthと列の数同時に指定することができます。 (grid-template-rowsも同様です。)
Grid Layoutの特徴
Grid Layoutの特徴は以下の通りです。
- 固定サイズの要素と可変サイズの要素を組み合わせたレイアウトが簡単に作成できる
- グリットに置くアイテムの位置を制御できる
- 同じグリットの中に複数のアイテムを入れることができる
固定サイズの要素と可変サイズの要素を組み合わせたレイアウトが簡単に作成できる
Grid Layoutで、固定サイズの要素と可変サイズの要素を組み合わせができるようになったのは
Grid Layoutで使える単位 fr があるからです。
frとは？
fr は、親要素の利用可能な余白の比率を表すことができます。
例えば
親要素のwidthが1000pxで、親要素にgrid-template-columns: 500px 1fr 1fr;と指定すると
1行目は500pxの固定幅になるので、のこり500pxを1:1で分割することになります。
そのため、 1行目は500px、3行目は250px、3行目は250pxのwidhtになります。
このように、frを駆使することで、固定サイズの要素と可変サイズの要素を組み合わせたレイアウトが簡単に作成できます。
グリットに置くアイテムの位置を制御できる
Grid Layoutで、グリットに置くアイテムの位置を制御できるようになったのは、
各エリアの名前を定義するgrid-template-areasとアイテムをエリアに配置するgrid-areaがあるからです。
grid-template-areasとgrid-areaとは？
grid-template-areasとは、grid-template-columnsとgrid-template-rowsで指定したエリアにそれぞれ、名前を定義するCSSプロパティです。
grid-areaとは、grid-template-areasで定義したエリアにアイテムを配置するCSSプロパティです。
例えば
See the Pen grid areas by でぐぅー | Qiita (@sp_degu) on CodePen.
grid-template-rows: 50px 200px 50px;とgrid-template-columns: 100px 1fr 100px;を指定して、↓こんな感じのレイアウトを作成し、grid-template-areasでそれぞれのグリットの名前を定義しています。
各アイテムのスタイルにgrid-area: エリア名；エリア名の位置に配置しています。
隣接している同じ名前のエリアは、エリアを結合して、配置できます。 （L型）
同じグリットの中に複数のアイテムを入れることができる
Grid Layoutで、同じグリットの中に複数のアイテムを入れることができるようになったのは、
アイテムを配置する位置を指定するgrid-column(grid-column-end・grid-column-start)やgrid-row(grid-row-end・grid-row-start)があるからです。
grid-column・grid-rowとは？
grid-column・grid-rowでは、グリッド線を基準に位置を決めることができます。
３x２のグリッドには、4本の縦グリット線と3本の横グリット線があります。
グリット線は、番号が振られており、縦グリット線は左から、横グリット線は上から１、２、3となっています。
例えば
See the Pen grid line by でぐぅー | Qiita (@sp_degu) on CodePen.
item1のように、grid-column: 1 / 3; grid-row: 1;と指定してあげることで、
縦グリット線1番から3番まで、縦グリット線1番の位置に配置することができます。
それを応用すると、上のように同じグリット内に複数のアイテムを配置することが可能です。
まとめ
この記事では、IEのサービス終了を機によく使われるようになるであろうGrid Layoutの特徴と具体的な使い方について解説しました。
今後、色々なサイトでGrid Layoutを使っていただけると嬉しいです。
最後まで読んでくださってありがとうございます！
X(Twitter)でも情報を発信しているので、良かったらフォローお願いします！