あけましておめでとうございます。フロントエンドエンジニアの木下です。
平成から新元号に変わる2019年、今年もアーキタイプをよろしくお願いいたします。
前回のCSSレイアウトの移り変わりの記事で触れた、グリッドレイアウトについて今回は深掘りします。
実際にレイアウトを組むのではなく、まずはCSSにおけるグリッドレイアウトとはどういうものかを書いていこうと思います。
グリッドレイアウトとは
グリッドとは水平線と垂直線が交差した行と列の集合です。
グリッドプロパティを使用することによって、要素をグリッドの行と列に配置することが可能になります。
また、JavaScriptで無理矢理行っていたようなレイアウトを実現できるようになります。
レイアウトのためにhtmlの構造を変えたりムダな要素を増やすような必要もなく、よりセマンティックなコーディングやレスポンシブデザインにも向いています。
『グリッドコンテナ』『グリッドアイテム』
グリッドレイアウトを始めるには、まず『グリッドコンテナ』を作成する必要があります。
『グリッドアイテム』とは『グリッドコンテナ』に内包する要素を指します。
『グリッドアイテム』にしたい要素を含む親要素に対して display: grid か display: inline-grid を指定します。
それにより指定された要素が『グリッドコンテナ』となり、内包するすべての小要素が『グリッドアイテム』へと変わり、グリッドレイアウト用プロパティを使用することが可能となります。
グリッドレイアウト用のプロパティ一覧は最後に記載しています。
『グリッドライン』
グリッドアイテムをレイアウトする際には、「グリッドコンテナを分割する垂直線・水平線のそれぞれ何番目から何番目に配置する」という指定の仕方になります。
その際に必要になるのが『グリッドライン』です。「グリッドコンテナを分割する垂直線・水平線」を『グリッドライン』と呼び、それぞれ番号が自動的に振られます。
『グリッドカラム』『グリッドロウ』『グリッドセル』『グリッドエリア』
『グリッドライン』がわかるとあとはテーブルと考え方は同じです。
隣接する垂直線の間を『グリッドカラム』
隣接する水平線の間を『グリッドロウ』
『グリッドカラム』と『グリッドロウ』が交差する部分を『グリッドセル』
『グリッドエリア』は単独・複数からなる『グリッドセル』
のことを指します。
これらはそれぞれの『グリッドカラム』の幅や『グリッドロウ』の高さを指定したり、『グリッドエリア』に名前を割り当てて『グリッドライン』による配置指定よりもわかりやすくさせることもできます。
グリッドレイアウト用のプロパティ
これまでは基本的な概念を説明してきましたが、実際にレイアウトを指定していくために必要なプロパティは以下になります。
grid
grid-template
grid-template-columns
grid-template-rows
grid-template-areas
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid-row
grid-row-start
grid-row-end
grid-column
grid-column-start
grid-column-end
grid-area
gap
row-gap
column-gap
複雑なレイアウトを組むことが可能なため、関連プロパティも数多くあり、値の算出のための関数なども増えています。
はじめはコーディングするたびに調べたりしていましたが、グリッドの概念を理解していると、「プロパティなんだっけな…」となってしまうことも私はなくなりました。
おわりに
今回記載したグリッドの概念を掴んでおけば、レイアウトを組んでいく際も迷いが少ないのできちんと理解しておくことをオススメします！
次回は、最後に記載したプロパティや関数を使って、実際にレイアウトを組んでいこうと思います。
それでは！ハッピーコーディング。