CSS3 グリッド レイアウト (グリッド レイアウト) の基礎知識

CSS3 では、ディスプレイおよびデザイン テクノロジ (特にモバイル ファーストのレスポンシブ デザイン) の発展に適応するための新しいグリッド レイアウトが導入されています。

主な目標は、これまでのテーブル、フロー、JS スクリプトの不安定で扱いにくいハイブリッド テクノロジによって実現されていた動的な Web ページ レイアウトを置き換える、安定した予測可能で意味的に正しい Web ページ レイアウト モデルを確立することです。

この記事では、グリッド レイアウト属性の基本概念と使用法を簡潔かつ正確に紹介します (Tade.com のオンライン HTML5 チュートリアルから抜粋)。

1. 概要

グリッド テンプレート領域 (grid-template-areas)、グリッド テンプレート行 (grid-template-rows)、およびグリッド テンプレート列 (grid-template-columns)、これら 3 つの属性は一緒に明示的にグリッド コンテナーを定義します。 。

grid-template 属性は、これら 3 つの属性を同時に設定するための短縮形です。グリッド項目のコンテンツは明示的なグリッドを超える場合があります。この場合、グリッド コンテナーは暗黙的なトラックのサイズを Grid-auto-rows プロパティと Grid-auto-columns プロパティによって決定します。

明示的なグリッドのサイズは、グリッド テンプレート領域で定義された行/列の数と、グリッド テンプレートの行/グリッド テンプレートの列プロパティで定義された寸法を持つ行/列の数の大きい方によって決まります。

グリッド テンプレート領域によって定義されているが、グリッド テンプレートの行/グリッド テンプレート列に次元が定義されていない行または列は、grid-auto-rows プロパティまたは Grid-auto-columns プロパティによってサイズ設定されます。

明示的な軌道が定義されていない場合でも、明示的なグリッドには各軸にグリッド線が含まれます。

グリッド配置プロパティの数値インデックスは、明示的なグリッドの端から計算されます。開始側から開始する場合、インデックスは 1 から始まる正の数になります。逆に端側からは-1から始まる負の数となります。

2. トラック サイズ: Grid-template-rows と Grid-template-columns

これら 2 つの属性は、スペースで区切られた一連のトラック リスト (トラック リスト自体) を定義するために使用されます。 use Grid グリッド名とトラック サイズ関数が定義されています。

トラック サイズ関数は、実際の充填内容 (最小コンテンツなど) に基づいて計算された特定の長さ、グリッド コンテナーに対する相対的なパーセンテージ、または利用可能なスペースのフラグメントにすることができます。

minmax(min,max) 関数を使用して、最小値と最大値の間のサイズの長さの範囲を指定することもできます。min/max パラメーターでは、前述のサイズ定義方法も使用できます。

grid-template-columns プロパティはグリッド列のトラック リストを指定し、grid-template-rows プロパティはグリッド行のトラック リストを指定します。

3. 名前付きエリア: Grid-template-areas 属性

この属性は、特定のグリッド項目に関連しないが、グリッドの配置 (グリッド配置) で使用できる名前付きグリッド エリアを指定します。で引用された属性。

grid-template-areas 属性は視覚的なグリッド構造も提供し、グリッド コンテナーの全体的なレイアウトを理解しやすくします。

+ は一連の文字列を表します。

グリッド テンプレート エリア属性内の個々の文字列 (文字列) は行を定義し、文字列内の各セル (セル) は列を定義します。

ブラウザは最長一致セマンティクスを使用して文字列を次のトークン リストに解析します:

1. 名前付きセル トークン (名前付きセル トークン) を表す名前コード ポイントの文字列 (名前はコードで構成されます)。ポイント (Unicode エンコード空間内の文字)。

2. 単一または複数の「.」の文字列は、null セル トークンを表します。
3. 一連のスペース (空白) は、マークが生成されないことを意味します。
4. ゴミ箱トークンを表すその他の文字列。

4. アプリケーションの例

上記の説明は厳密ですが、少し厳格です。説明するために、引き続き、従来のレスポンシブな複数列と複数行のページ レイアウトの例を使用します。 HTML コード]

#page {  display: grid;  width: 100%;  height: 250px;  grid-template-areas: "head head"                       "nav  main"                       "foot ....";  grid-template-rows: 50px 1fr 30px;  grid-template-columns: 150px 1fr;}#page > header {  grid-area: head;  background-color: #8ca0ff;}#page > nav {  grid-area: nav;  background-color: #ffa08c;}#page > main {  grid-area: main;  background-color: #ffff64;}#page > footer {  grid-area: foot;  background-color: #8cffa0;}

上記のコードは、grid-template-areas を通じて 3 行 2 列の柔軟なレイアウトを定義します:

1. 2 つの隣接する head 文字列により、2 にまたがる head Area という名前のグリッドが生成されます。列;

2. ナビ、メイン、およびフット文字列はそれぞれ同じ名前の 3 つのグリッド領域を生成します

3. 4 つのポイント (....) を接続して空のグリッド領域を生成します。

次に、各行のトラックの高さは、grid-template-rows によって定義されます。

1 行目と 3 行目はそれぞれ 50 ピクセルと 30 ピクセルの固定高で、2 行目は利用可能なスペースである伸縮可能なサイズです。固定サイズを差し引いた後、弾性係数に従って、長さに比例して割り当てられます

ここには弾性サイズが 1 つだけあり、弾性係数は 1 です。これは、残りのスペース幅をすべて占めることを意味します (つまり、グリッド コンテナーの幅 - 50ピクセル - 30ピクセル）。

各列のトラック幅は、grid-template-columns によって定義されます。列 1 の幅は 150 ピクセルに固定されており、列 2 は水平方向の残りのスペースを占めます。

オンラインの例を通じて自分でテストできます: http://wow.techbrood.com/fiddle/15975

【注意: グリッドレイアウト関連の仕様はまだ作業草案の状態であるため、ブラウザで実際のテストを行って互換性を確認してください。 】

by iefreer