【CSS】Grid Layout を使いこなす – その6 まとめ

その1 基本

基本的な考え方

grid:display
コンテナに指定。Grid Layout モジュール利用に必須。

grid-template-rows
コンテナに指定。各行トラックの高さを指定。

grid-template-columns
コンテナに指定。各列トラックの幅を指定。

grid-row
アイテムに指定。そのアイテムの行の領域を指定。

grid-column
アイテムに指定。そのアイテムの列の領域を指定。

その2 トラック、領域の値

<トラックの値の指定に利用できる関数>

minmax() 関数

repeat() 関数

repeat(auto-fit | auto-fill)

repeat(auto-fit | auto=fill, minmax())

<アイテムの領域の値の指定に利用できる記述法>

span を利用して自動配置

負のライン番号

その3 基本以外のプロパティ

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

その4 ショートハンド

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 に分ける。

その5 IE 対応

Grid Layout IE ベンダープレフィックス対応表

Autoprefixer
ベンダープレフィックスを自動に書き込むツール

View Comments (0)