CSS网格

什么是网格

网格是一种新型的布局方式，主要来实现一些，比较复杂型单元格合并布局，主要应用于一些大屏项目或者车载项目的展示

网格和表格的区别

网格布局：grid布局，也称为网格布局，简化表格的结构，同时还能实现划分行列单元格，简化布局。横平竖直，比表格更加灵活。

表格布局：属于正常布局的范畴，划分行列属于二维布局中的一种，但是比较复杂（table>tr>td），表格布局中最重要的 最复杂的点就是 合并单元格；

什么是容器？

容器就是我们所谓的父元素

项目就是我们的子元素

如何触发网格

触发属性：display属性

取值grid/inline-grid

grid：快状网格

inline-grid：行内块状网格

display：grid；

容器中的属性有：

grid-template-rows：划分行数

grid-template-columns：划分列数

        取值：

        可以是 纯数值：200px

        百分比数值：10%

        repeat()函数 repeat(num1,num2) num1=重复的次数 num2=宽度或者高度

                grid-template-rows：50px repeat(5,100px) 50px; 划分行数

                        第一行是50px 最好是50px  中间是5行 100px的

        占剩余宽度的所有：auto

                grid-template-rows：100px auto 100px auto

                        两行是100px的 两个auto 占剩余父元素 的值

         自动划分行数和列数：auto-fill

                配合repeat函数使用 根据数值自动划分，距离不够则不会划分

                grid-template-rows：repeat（auto-fill,100px）；

        最小最大行数 minmax()

                两个参数，最小不能小于参数1，最大不能大于参数2

                grid-template-rows:100px minmax(100px,200px) 100px;

                 第一行和尾行是100px 中间如果剩120px 没占 那就占120px，剩80px 那就按照

                最小100px占。剩230px 按最大值200px占

       按比例均分 1fr

                grid-template-rows:1fr 2fr 3fr;

                 1+2+3  总高度或者宽度/6 然后 乘1 2 3；

调整单元格间距

row-gap 行间距

 column-gap 列间距

gap:第一个值是行间距，第二个值是列间距

单元格内容对齐方式

    主要是每一个网格中项目的对齐方式    属性place-items 

        取值 start 开始位置

                end 结束位置

                center 居中位置

                stretch 拉伸

        例 place-items：center center;

网格的对齐方式

        代表的是整个网格位于容器内的对齐方式  属性place-content

        取值 start 开始位置

                end 结束位置

                center 居中位置

                space-around 物品均匀分布在行中；第一项在起始行，最后一项在结束行

                space-between 项目均匀分布在行中，周围空间相等

                space-evenly 项目分布使得任何两个项目之间的间距（以及边缘的空间）相等。

                

合并单元格

单一属性

    grid-row-start:数值  网格线的开始(横向)
    grid-row-end:数值    网格线的结束(横向)
    grid-column-start:数值 网格线的开始(纵向)
    grid-column-end:数值   网格线的结束(纵向)

两个复合属性

    grid-row:num1/num2
    grid-column:num1/num2