grid布局

           网格布局设置:

              display:; grid    inline-grid

           容器(父元素):

              划分行:

              grid-template-rows:;

                  px

                  %

                  fr

                  重复: repeat(行数,均分fr)

                 

              划分列:

              grid-template-columns:;

                  px

                  %

                  fr

                  重复: repeat(列数,均分fr)

                 

              划分区域:

              grid-template-areas:

                  "区域1 区域2 区域3"

                  "区域4 区域5 区域6";

              注意:必须分了行和列,子元素占区域时,需要结合项目属性grid-area:区域名字;

             

              行间距 列间距

              grid-row-gap:10px;行间距

              grid-column-gap:4px;列间距

               综合写法:grid-gap:行间距 列间距;

             

           综合写法:

           grid-template:"分区" "分区" "分区" 分行/分列;

          

           网格整体垂直   水平位置

           align-content:;

           justify-content:;

              start 起始位置

              end   结束位置

              center 居中

              stretch    默认值,项目没有指定大小,拉伸占据真个网格大小

              space-around  两端平分

              space-between 两端对齐

              space-evenly: 均匀排列每个元素,每个元素之间的间隔相等          综合写法: place-content:垂直  水平;  

          

           指定网格的垂直  水平呈现方式

           align-items:;

           justify-items:;

              start 起始位置

              end   结束位置

              center 居中

              stretch    默认值,项目没有指定大小,拉伸占据真个网格大小

           综合写法: place-items:垂直位置 水平位置;

          

          

          

           项目(子元素):

              grid-area:占区域;注意: 需要分区才可以使用

                  方式一:

                  grid-area:a1;

                  方式二:

                  grid-area:行起点/列起点/行结束/列结束;

                 

              grid-column-start:列线开始;

              grid-column-end:列线结束;

              grid-row-start:行线开始;

              grid-row-end:行线结束;

             

              只有end才有span  意思是占几个网格  3指占3个

              grid-column-end:span 3;

              grid-row-end:span 2;

             

              单个元素在网格的垂直  水平对齐方式

              align-self:;

              justify-self:;

                  start 起始位置

                  end   结束位置

                  center 居中

                  stretch    默认值,项目没有指定大小,拉伸占据真个网格大小

              综合写法: place-self:垂直位置 水平位置;