詳細ページレイアウト--grid属性構文

現在、グリッドの互換性は非常に難しい、まだそれのための主流のブラウザのサポートが可能となり、すぐにそれはそれは非常に良いサポートを持っていることを発表来ie9,10、あなたは現在の時代遅れの構文を使用する必要があります。私は近い将来、グリッド内のすべての必要な配置のスキルフロントエンドのスタッフになるだろうと信じています。

はじめプロパティ

親要素の1プロパティ

 

プロパティ 説明
表示 設定したグリッドレイアウト
グリッドのテンプレート行 グリッドの行数
グリッドテンプレート列 グリッドの列数
グリッドのテンプレートエリア メッシュ要素は、サブ名に配置されています
グリッド列ギャップ 垂直グリッドトラックのサイズを指定するために使用されます
グリッド列ギャップ グリッドレールの行のサイズを指定するために使用され
グリッドギャップ 略語グリッドカラムギャップと、これら二つの特性のグリッド列ギャップ
- アイテムを正当化 X軸アライメントにおけるすべてのグリッドセルの内容
- アイテムを揃えます Y軸のグリッド整列内のすべてのセルの内容
正当化コンテンツ グリッド容器にX軸グリッドの全体構成を設定します
ALIGN-コンテンツ グリッド容器にY軸グリッドの全体構成を設定します
グリッド・オート列 高いの目に見えないグリッドを設定します。
グリッド自動行 目に見えないグリッド幅を設定します
グリッド・オートフロー 場合のレイアウト、選択したメッシュを充填する方法

 

2.属性の子要素を設定します。

 

プロパティ 説明
グリッドエリア 単一の子要素に名前
グリッド列スタート 垂直バーで始まる要素の位置
グリッド列エンド 垂直バーで終了します
グリッド行スタート これは水平線から始まりました
グリッド列エンド これは水平線で終わりました
グリッド行 グリッド行スタートとグリッド列エンド略称
グリッド列 略語グリッド列スタートし、これら二つの性質のグリッド列エンド
グリッドエリア グリッド行グリッド列の略語
正当化、自己 小さなグリッドにおけるそのX軸方向の単一のサブエレメントの配置を提供します
合わせ自己 小さなグリッドにそのY軸に単一のサブエレメントの配置を提供します
ALIGN-コンテンツ グリッド容器にY軸グリッドの全体構成を設定します

おすすめ

転載: www.cnblogs.com/jing-tian/p/10989407.html