CSSグリッドレイアウトグリッドエントリ

CSSグリッドレイアウトグリッドエントリ

CSSグリッドレイアウトは、2次元のグリッドレイアウトで、次の特定の使用を導入する便利で簡単、二次元のページレイアウトのためにそれを使用します。

1.定義グリッドレイアウト

まず、あなたは、ディスプレイを使用する必要があります。グリッドのコンテナ要素は、グリッドレイアウトとして定義されます。

2.行と列の数を設定します。

グリッドテンプレート列の行の数に設定され、列とグリッドテンプレート行の数を設定するために使用されます。各行の値が高いランク、および各幅の背後にあります。
このような動作は、例えば、グリッドが3行4列のレイアウトを設けてもよい：

すなわち3は、高トレッキング200pxの、300ピクセル、100ピクセル、それぞれ列200pxの4列幅、200pxの自動車25％であり、25は、親コンテナの幅の25％を表します。 ％すなわち250ピクセル、他の3つの広範なすなわち450pxを示す親コンテナの幅を引い自動。
次のような効果が得られる。

また、比がグリッドサイズFRを設定するために使用することができる：
たとえば、次の

3行ボックス比を与えるためには、1：2：1、それぞれ、即ち、3トレッキング高い150ピクセル300ピクセル150ピクセル。1：4の比1：1：1、すなわち、カラム4幅が250ピクセルです。各高トレッキング親コンテナの高さと、各列の親コンテナの幅の列幅。
次のようにボックスの効果がある：

各列の各行の行の高さが同じである場合に、列の幅が同じである、（REPEATで動作することができる）、
例えば：

次のような効果を得ることができます。

3.メッシング地域

使用grid-template-areas对网格划分区域，对上面的网格进行区域划分，可以做以下操作：
第一步，先给每个区域起个名字，每个区域用一个名字占用位置。

说明：给每个区域起一个名字，如上12个网格一共分为a b c 3个区域，a占两个网格，b占五个网格，c占四个网格。
注：每个区域必须为矩形。
第二步：指定div对应区域的名字

效果如下：

4. 设置行间距和列间距

可以用grid-column-gap设置列的间距，用grid-row-gap设置行的间距。
例如：对上面划分好的区域设置行的间距为5px；列的间距为10px，可以做以下操作：

得到如下效果：

间距和列间距可以用复合写法，例如grid-gap:5px 10px;第一个值是行间距，第二个值是列间距。

5. 子项水平居中方式

可以用justify-items设置子项的水平居中方式
默认值：stretch，表现为水平或垂直填充。
效果：

值为start时

效果：

值为center时效果：

值为end时效果：

6. 子项垂直居中方式

垂直方法の中心子属性ALIGN-アイテムを備えた
ストレッチデフォルト値、水平または垂直の充填のように表現：デフォルト。
効果：

開始値：

効果：

効果の中心値：

端効果の値：

注：複合体は水平および垂直配向表すように書くことができる
場所、アイテムを：開始センター、
最初の値は、垂直配向を表わし、第2の値は水平方向の配置を表しています。

さらに正当化コンテンツができるグリッドのプロパティ全体の水平方向の配置を、グリッドは、本明細書では詳細に説明しない同一の弾性レイアウト方法を用い、垂直配向ALIGN-コンテンツと一体的に設けられています。