ディレクトリ

グリッドレイアウトグリッド（1）

グリッドレイアウトグリッド（1）

実装

display:gridまた、になることができ、インライン要素 display:inline-grid

tip:设为网格布局以后，容器内的子元素的 float 、 display:inline-block/table-cell , vertical-align 和 column-*等
各项设置属性都将失效

容器の特性は、提供され

行の高さと列の幅が提供されています

grid-template-columns各列定義列幅
grid-template-rows各行の定義された行の高さ

.container{
    display:grid;
    grid-template-columns:  100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

grid中对属性赋提供了多种方式
上面可以使用33.3% , 33.3% , 33.3%
tip: 当重复的数值过多的时候还可以使用repeat()

繰り返す（）

この方法は、コードの使用簡略化するために、過度の繰り返しを主に使用される
2つのパラメータを受け付け

最初は、繰り返しの回数です
第二は、重複する値であります

.container{
    display:grid;
    grid-template-columns:  repeat(3,100px);/*repeat(3,33.3%)也是一种写法*/
    grid-template-rows: repeat(3,100px);
}

しかし、repeat()単一の値を複製書くことができるだけでなく、それはまた、繰り返しパターンのように記述することができます

例：

#contanner{
    display: grid;
    grid-template-columns:repeat(3,80px 20px 50px);
    grid-template-rows:90px;
}

Awart

オートフィルキーワード

時には、セルのサイズは固定が、コンテナのサイズが不明です。多くの細胞として収容するために、各列または各行を所望の場合は、使用できるauto-fillキーワードは、オートフィルを示しています。

オートフィットキーワード

上記の自動調整も同様ですが、異なる場所があります（後述）

frのキーワード

カラムより提供されるプレゼンテーションを容易にするために、グリッドレイアウトfr略語キーワード（フラクション）の

2列の幅の場合1frと2fr、それは後者の2倍を表し

MINMAX（）関数

函数产生一个长度范围，表示长度就在这个范围，接受两个参数 最小和最大

.container{
    width:200px;
    display:grid;
    grid-template-columns: 1fr 1fr minmax(100px , 1fr);
    grid-template-rows: repeat(3,100px);
}

autoキーワード

例:grid-template-columns: 50px auto 50px;

第二列の幅は、実質的にセルの内容が提供されない限り、コラムセルの最大幅と等しくされmin-width、その値が最大幅よりも大きくなります。

セルピッチ

grid-row-gap行（行ピッチ）の間隔
grid-column-gap、列間隔に列に設けられた（列ピッチ）

grid-gap 速記（接頭辞グリッド - 行きます）

gap: <grid-row-gap> <grid-column-gap>;
如果grid-gap 省略了第二个值，浏览器会默认第二个值会等于第一个值

場所コンテンツ

justify-itemsセルの内容が水平方向（左、右）の位置属性
align-itemsセルの内容垂直位置の特性を（下）

次のような特性は以下のとおりです。

start：セルの先端の位置合わせ
end：セルの端縁の位置合わせ
center：内部グリッドセルを中心に
stretch：（デフォルト）の幅全体をストレッチセルを満たしました

place-items速記

place-items : <align-items> <jsutify-items>

容器内のテーブル位置

justify-content属性容器（右、左）内の水平位置にコンテンツ全体領域
align-content（次へ）全体プロパティの垂直位置では、コンテンツ領域であります

次のような特性は以下のとおりです。

start：スタートコンテナフレームに合わせ
end:对齐容器的结束边框
center：容器内部居中
stretch:项目大小没有指定时，；拉伸占据整个网格容器。
space-around:每个项目两侧的间隔相等，所以，项目之间的间隔比项目与容器边框的间隔大一倍
space-bewteen: 项目与项目的间隔相等，项目与容器边框之间没有间隔
space-evenly: 项目与项目之间的间隔相等，项目与容器边框之间也是同长度的间隔

place-content 简写

place-content : <align-content> <justify-content>

grid-auto-columns/rows

有时，一些项目的指定位置，在现有网格的外部，比如网格只有三列，但是某一个项目指定在第五行。这时，浏览器会自动生成多余的网格，以便放置项目

打开示例代码

```css #container{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; grid-auto-rows: 50px; } .item { font-size: 2em; text-align: center; border: 1px solid #e5e4e9; } .item-1 { background-color: #ef342a; } .item-2 { background-color: #f68f26; } .item-3 { background-color: #4ba946; } .item-4 { background-color: #0376c2; } .item-5 { background-color: #c077af; } .item-6 { background-color: #f8d29d; } .item-7 { background-color: #b5a87f; } .item-8 { background-color: #d0e4a9; grid-row-start: 4; grid-column-start: 2; } .item-9 { background-color: #4dc7ec; grid-row-start: 5; grid-column-start: 3; } ```

顔にgrid-auto-columns/rows割り当て、グリッド線を表すこれらの値は、左から右にカウント列は、行が下（上から数えて詳細を参照します）。

互換性の問題

現在、主要なブラウザではすでに効果的にグリッドのプロパティをサポートしていますが、下位バージョンのブラウザのプロパティは、IEブラウザでサポートしていませんサポートしていませんが、IEエッジの新しいバージョンもあり、この属性をサポートすることができます。

次の図は、主要なブラウザのサポートケースを示しています。

リファレンスここhttp://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html