その１ 基本
grid:display
コンテナに指定。Grid Layout モジュール利用に必須。
grid-template-rows
コンテナに指定。各行トラックの高さを指定。
grid-template-columns
コンテナに指定。各列トラックの幅を指定。
grid-row
アイテムに指定。そのアイテムの行の領域を指定。
grid-column
アイテムに指定。そのアイテムの列の領域を指定。
その２ トラック、領域の値
＜トラックの値の指定に利用できる関数＞
repeat(auto-fit | auto=fill, minmax())
＜アイテムの領域の値の指定に利用できる記述法＞
その３ 基本以外のプロパティ
gap プロパティ
コンテナに指定。トラック間の隙間を指定。
grid-template-areas と grid-area の組み合わせ
grid-template-areas はコンテナ、 grid-area はアイテムに指定。名前付きの領域を指定。
grid-auto-row, grid-auto-column
コンテナに指定。拡張したトラックの大きさを指定。
grid-auto-flow
コンテナに指定。アイテムを配置する方向を指定。
＜Grid Layout モジュール以外のプロパティ＞
justify-content
align-content
justify-item
align-item
justify-self
align-self
order
その４ ショートハンド
grid-template でまとめる
grid-template-rows, grid-template-coloums, grid-template-areas のショートハンド。
grid でまとめる
コンテナに指定するプロパティを、ほぼ全部、まとめられるショートハンド。
grid-gap でまとめる
grid-row-gap, grid-column-gap のショートハンド。
grid-row, grid-column 開始と終了を分けて記述
grid-row-start, grid-row-end または grid-column-start, grid-column-end に分ける。
その５ IE 対応
Autoprefixer
ベンダープレフィックスを自動に書き込むツール
View Comments (0)