grid网格布局

1.标签定义使用说明

        grid 是一个 CSS 所有网格容器的简写属性，可以用来设置以下属性：

                显式网格属性： grid-template-rows、grid-template-columns 和 grid-template-areas。

                隐式网格属性： grid-auto-rows、grid-auto-columns 和 grid-auto-flow。

                间距属性： grid-column-gap 和 grid-row-gap。

        1.1fr单位

                轨道可以使用任何长度单位进行定义。

                网格引入了fr单位来帮助我们创建灵活的网格轨道。一个f单位代表网格容器中可用空间的一等份。

                以下实例定义了一个网格定义将创建三个相等宽度的轨道，这些轨道会随着可用空间增长和收缩。

        1.2网格单元

                一个网格单元是在一个网格元素中最小的单位，从概念上来讲其实它和表格的一个单元格很像。

         1.3网格线

                  划分网格的线,称为"网格线"。应该注意的是，当我们定义网格时,我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m列有m +1根垂直的网格线,n行有n+1跟水平网格线。

2.属性值

值	描述
none	默认值。不定义行或列的尺寸。
grid-template-rows / grid-template-columns	设置列和行的尺寸。
grid-template-areas	指定网格布局使用的网格项名称
grid-template-rows / grid-auto-columns	指定行的尺寸（高度），以及列的自动尺寸。
grid-auto-rows / grid-template-columns	指定行的自动尺寸，并设置 grid-template-columns 属性。
grid-template-rows / grid-auto-flow grid-auto-columns	指定行的尺寸（高度），以及自动布局算法怎样运作，和列的自动尺寸。
grid-auto-flow grid-auto-rows / grid-template-columns	指定自动布局算法怎样运作，和行的自动尺寸，以及设置 grid-template-columns 属性。
initial	属性设置为默认值
inherit	从父原生继承该属性，

        2.1.grid-template-rows 属性

                        grid-template-rows 属性用于设置网格布局中的行数及高度。

                        这些值是一个以空格分隔的列表，其中每个值指定相应行的高度。

                语法：

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

值	描述
none	默认值，不指定行的大小。
auto	行的大小由容器的大小和行中网格元素内容的大小决定。
max-content	每行的大小设置为该行中最大网格元素的大小。
min-content	每行的大小设置为该行中最小网格元素的大小。
length	长度值，可以是 px 为单位的数值或百分比 %。 0 是默认值。
initial	将此属性设置为默认值
inherit	从父元素继承该属性

                2.2.grid-template-columns属性

                        grid-template-columns 属性用于设置网格布局中的列数及宽度。

                2.3.grid-column-start 属性

                        grid-column-start 属性定义了网格元素从哪一列开始。

                        语法：

grid-column-start: auto|span n|column-line;

值	描述
auto	默认值，网格元素按流设置。
span n	指定网格元素将跨越的列数。
column-line	指定从哪个列上开始显示网格元素。

                2.4.grid-column-end 属性

                        grid-column-end 属性定义了网格元素跨越多少列，或者在哪一列结束。