CSSグリッドレイアウトモジュールの紹介
一度だった テーブル, それから マージンとフロート, それから フレックスボックス そしていま グリッド：CSSは常に古くからの仕事を楽にするための新しくてより良い方法を目指していました Webレイアウトのコーディング. の CSSグリッドレイアウトモデル レイアウトを作成および更新できます 2つの軸に沿って：縦横, 幅と高さの両方に影響 要素の.
グリッドレイアウトはマークアップ内の要素の位置には依存しません。 要素の配置をシャッフルする レイアウトを変更せずにマークアップで。グリッドモデルでは、グリッドコンテナ要素は グリッドの列と行に分割 （総称して グリッドトラックによって グリッド線. それでは、方法を見てみましょう サンプルグリッドを作成する.
ブラウザサポート
この記事を書いている時点では、CSSグリッドモジュールは最新のIEブラウザとEdgeでしかサポートされていません。 CSSグリッドは 実験段階で あなたがしなければならない他の主要なブラウザで 手動でサポートを有効にする：
- Firefox： Shift + F2を押す, 次のコマンドを入力してください ブラウザの下部に表示されるGCLI入力バーに、次のように入力します。
pref set layout.css.grid.enabled true. - クロム： ブラウズ
chrome：// flagsURLと有効にする実験的Webプラットフォーム機能.
すべての主要なブラウザサポートはそうです 2017年前半中旬までに.
サンプルグリッド
に 要素をグリッドコンテナに変える あなたが使用することができます この3つのうちの1つ 表示 プロパティ：
表示：グリッド。- 要素は ブロックグリッドコンテナに変換表示：インライングリッド。- 要素は インライングリッドコンテナに変換subgridを表示します。- 要素がグリッドアイテムの場合 サブグリッドに変換 これはグリッドテンプレートとグリッドギャッププロパティを無視します
テーブルが複数のテーブルセルで構成されているように、グリッドは 複数のグリッドセルで構成. グリッド項目は 一連のグリッドセルに割り当てられる それは総称して グリッド領域.
作成します 5つのセクションを持つグリッド（グリッド領域）：上、下、左、右、中央。 HTMLは コンテナdiv内の5 div.
上左センター右底
CSSでは、 グリッドテンプレート領域 財産 異なるグリッド領域を持つグリッドを定義します. その価値, 文字列はグリッド行を表します そして 文字列内の有効な名前はすべて列を表します. に 空のグリッドセルを作成する あなたが使用する必要があります ドット（.） キャラクター 行ストリング内.
の グリッド領域名 によって参照されます。 グリッドエリア 個々のグリッドアイテムのプロパティ.
.grid-container 幅：500ピクセル。高さ：500ピクセル。表示：グリッド。 grid-template-area： "上部上部上部" "左中央右" "下部下部下部"; grid-area：top;。グリッドの底部。 grid-area：left;。 grid-area：right;。グリッド中心：グリッド領域：中心。
だからこのコードは作成します 3行3列のグリッド. の 上 アイテムがまたがる領域を占める 最初の行に3列 そしてその 底 アイテムがまたがる 最後の行に3列. それぞれの 左, センター そして 右 アイテムにかかる 真ん中の行の1列.
今私達はする必要があります 寸法を割り当てる これらの行と列に。の グリッドテンプレート列 そして グリッドテンプレート行 プロパティ グリッドトラックのサイズを定義します （行または列）.
.grid-container 幅：500ピクセル。高さ：500ピクセル。表示：グリッド。 grid-template-area： "上部上部上部" "左中央右" "下部下部下部"; grid-template-columns：100ピクセル自動100ピクセル; grid-template-rows：50ピクセル×150ピクセル。
これがCSSグリッドの外観です（追加のスタイルもあります）。
グリッド項目間のスペース
あなたは付け加えられます 列と行の間の空白 使う grid-column-gap そして グリッド行間隔, またはその速記特性 グリッドギャップ.
.grid-container 幅：500ピクセル。高さ：500ピクセル。表示：グリッド。 grid-template-area： "上部上部上部" "左中央右" "下部下部下部"; grid-template-columns：100ピクセル自動100ピクセル; grid-template-rows：50ピクセル×150ピクセル。グリッドギャップ：5px 5px。
以下のことがわかります グリッドギャップ プロパティは確かにグリッド項目間のギャップを追加しました.
グリッドの内容と項目を揃える
の 内容を正当化する グリッドコンテナのプロパティ（.グリッドコンテナ）グリッドの内容を揃えます インライン軸（水平軸）に沿って そして財産 コンテンツを整列, グリッドの内容を整列させる ブロック軸（垂直軸）に沿って. 両方の特性 これらの値の1つを持つことができます： 開始, 終わり, センター, 間のスペース, スペースアラウンド そして 平らに.
該当する場合は、トラック（行または列）のサイズ コンテンツに合わせて縮小 整列時グリッドコンテンツのスクリーンショットを見てください。 さまざまな値で整列 以下.
内容を正当化する：開始。
内容を正当化する：終わり。
内容を正当化する：中央。
内容を正当化する：間のスペース。
内容を正当化する：スペースアラウンド。
内容を正当化する：空間的に均等。
コンテンツの整列：開始。
align-content：end;
コンテンツの整列：中央。
align-content：スペース間。
align-content：スペースアラウンド。
コンテンツの整列：スペースを均等に。
両方 内容を正当化する そして コンテンツを整列 プロパティ グリッド内でコンテンツ全体を整列させる.
に グリッド領域内の個々の項目を整列させる, 使用 他の一対の配置プロパティ： 正当化項目 そして 整列項目. どちらも、次のいずれかの値になります。 開始, 終わり, センター, ベースライン （領域の基本グリッド線に沿ってアイテムを整列させる） ストレッチ （アイテムはその全領域を埋める）.
