前端布局-----Grid布局

什么是网格：

1.固定的位置和弹性的轨道的大小：

可以使用固定的轨道尺寸创建网格，比如使用像素单位，也可以使用比如百分比或者专门为此目的创建的新单位fr来创建弹性尺寸的网格。

2.元素位置：

可使用行号行名来标定一个网格区域来精确定位元素

网格容器：

我们通过在元素上声明display： grid或者display：inline-grid来创建一个网格容器。所有的直系子元素将成为网格元素。

网格轨道：

我们通过grid-template-columns和grid-template-rows来定义网格中的行和列

1.fr单位：新的fr单位代表网格容器中可用空间的一等份，这些轨道会随着可用空间增长和收缩。

2.在轨道清单中使用repeat()：

3.隐式和显示网格：

我们用grid-template-columns属性定义了自己的列轨道，但是却让网格按所需的内容创建行，这些行会被创建在隐式网格中。显示网格包含了你在grid-template-columns和grid-template-rows属性中定义的行和列。如果你在网格定义之外又放了一些东西，或者因为内容的数量而需要的更多网格轨道的时候，网格将会在隐式网格中创建行和列。按照默认，这些轨道将自动定义尺寸，所以会根据他里面的内容改变尺寸。可以在隐式网格中用grid-auto-rows和grid-auto-columns属性来定义一个设置大学尺寸的轨道

4.轨道大小和minmax()：

在设置一个显示的网格或者定义自动创建的行和列的大小的时候，我们想给网格一个最小的尺寸，确保他们能扩大到容纳他里面添加的内容。

网格线：

1.跨轨道放置网格元素：

使用grid-column-start，grid-column-end，grid-row-start和grid-row-end属性将算计放到网格对应的位置上

网格间距：

在两个网格单元之间的网格横向间距或网格纵向间距，可使用grid-column-gap和grid-row-gap属性来创建，或者直接使用两个合并的缩写形式grid-gap。

嵌套网格：

一个网格元素可以也成为一个网格容器，当元素不是网格容器的直接子级元素时，他们不会参与到网格布局中，并显示为正常的文档流。嵌套网格和他的父级没有关系。