css网格布局

1.网格布局的概念，和flex布局的区别

含义：
它将网页划分成一个个网格，可以组合任意不同的网格，做出各样的布局
​
区别：grid布局与flex布局一定的相似性，都可以指定容器内多个项目的位置。但是它们也存在重大qub
​
flex 布局是轴线布局，只能指定项目针对轴线位置，可以看作是一维布局
grid 布局则是将容器划分成不同的“行”和“列”，产生单元格，让和指定“项目所在单元格”，可以看作是二维布局，
​

网格布局案例：不规则布局页面（win窗口）

2.网格布局基础知识

1.容器和项目

容器：一个案例中最大的合作，可以理解成父元素
项目：一个案例中最大盒子里面的内容，可以理解为子元素
​

    

        

    
    

        

    
     

        

    

​

2.行和列

行和列：容器了， 的水平区域称为“行”，垂直区域称为“列”

3.单元格

单元格：行和列的交叉区域，称之为“单元格”

4.网格线

网格线：划分网格的线，称之为“网格线”。水平网格线划分出行，垂直网格线划分你出列

注意：
​
   1.组成一个网格：需要4条线，2条横线，2条纵线
   2.组成1行2列的网格，需要5条线，2条横线，3条纵线
   3.组成2行1列的网格，需要5条线，3条横线。2条纵线
​
总结：
  如果一个m行n列的网格，需要m+1+n+1条线，m+1条横线，n+1条纵线

3.网格布局中的属性

含义：网格布局中的属性和flex属性类似，为了分类，一类为容器属性；一类是项目属性

1.容器属性

（1）触发网格布局

给父元素添加display:grid;
display关于网格的取值分为两个，grid（块网格）和inline-grid（行内网格，行内块）
​
grid====容器从上向下排列
inline====容器从左向右排列

（2）行列划分

规定行属性:grid-template-row;
固定列属性:grid-template-column;
后面的取值数量代表多少行，多少列

1，绝对大小（根据列数或者行数确定值的格式）例:200px 200px 200px
​
grid-template-columns:200px 200px 200px;
grid-template-rows:200px 200px 200px;

2.百分比（根据行数或者列数的确定值的个数）例如：33.33% 33.33% 33.33%
​
grid-template-columns:33.33% 33.33% 33.33%;
grid-template-rows:33.33% 33.33% 33.33%;

3.功能函数：repeat()
​
repeat(参数1，参数2)
​
参数1：重复的次数，
参数2：重复的次数或者重复的模式
​
eg：
  grid-template-columns:repeat(4,25%);
等同于
  grid-template-columns:25%,25%,25%,25%;

4.auto-fill关键字（自动填充）配合功能函数使用
​
grid-template-colums:repeat(auto-aill,33.33%);
​
当项目宽高固定，容器不固定的情况下，自动填充网格列数

5.fr关键字（列宽片段）
​
为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为片段）。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
​
grid-template-rows:100px 1fr 100px;
若只有一行或者一列设置了1fr，就代表那一列或一行自适应宽度
​
grid-template-columns:1fr 3fr 1fr;
grid-template-rows:repeat(3,100px);

6.minmax()
​
grid-template-rows:minmax(100px, 200px) 200px 300px;
设置这一行或一列的最大值或者最小值，元素自适应

7.auto
​
grid-template-rows:100px auto 200px;
设置这一行或这一列的宽度高度自适应，直至充满整个容器的宽或者高
自动占满剩余空间

（3）列间距（重点：复合属性）

grid-row-gap:20px   /*行间距*/
grid-column-gap:20px   /*列间距*/
grid-gap:30px 30px  /*复合写法*/
​
新版本已经省略grid-前缀  row-gap  /  column-gap   /  gap

            /* grid-row-gap:20px ;
            grid-column-gap: 20px; */
​
            /* grid-gap:20px 20px ; */
            /* 复合写法*/
​
            /* row-gap: 20px;
            column-gap: 20px; */
            /* 新版本中可以省略前缀 grid- */
​
            gap: 20px 20px;
            /* 新版复合写法 */
​
 gap: 20px 20px;  只写一个值，行间距和列间距相同
                  写两个值，行间距为第一个值。列间距为第二个值

（4）指定区域

display:grid;
grid-template-columns:100px 100px 100px;
grid-template-rows:100px 100px 100px;
grid-template-areas:'a b c'
                    'd e f'
                    'g h i';
​
/*
     将整个网格容器分为9个区域，每个区域对应一个单元格
     通过grid-area  指定项目名称
*/

display:grid;
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);
grid-template-areas:'a a a'
                    '. . b'
                    '. c c';

合并的时候使用grid-area：网格名字；进行合并

例：

.box{grid-area:a}

**********************只能实现矩形的合并*********************************************

（5）项目排列顺序

grid-auto-flow:column / row; 
  row dense和colimn dense
这两个值主要用于，默认下项目指定位置以后，剩下的项目怎么自动放置
​

grid-auto-flow:column;
​
改变（主轴方向），项目垂直排列

（6）单元格内容对齐方式（重点：复合属性）

justify-items:start / end / center / stretch;
align-items:start/ end / center /stretch;
​
复合写法：
  place-items:    
​
start :对齐单元格的启始边缘
end ：对齐单元格的结束边缘
center ：单元格内部居中
stretch ：拉伸，占满单元格的整个宽度（默认值）

（7）单元格项目对齐方式（重点：复合属性）

jusyify-content:start / end / stretch / space-around / space-between / space-evenly;
aligen-conter:start / end / stretch / space-around / space-between / space-ecenly;
​
复合写法：
place-conter:    
​
start:对齐容器的起始边框
end:对齐容器结束边框
center：容器内部居中
stretch：项目大小没有指定拉伸占据整个网格容器
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目于容器边框的间隔大一倍
space-between：项目与项目的间隔相等，项目于容器边框之间没有间隔
space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔

2.项目属性

（1）网格线合并（单一属性）

grid-column-start
grid-column-end
grid-row-start
grid-row-end
​
grid-column-start属性：左边框所在的垂直网格线
grid-column-end属性：右边边框所在的垂直网格线
grid-row-start属性：上边边框所在的水平网格线
grid-row-end属性：下边边框所在的水平网格线

grid-column-start:1;
grid-column-end:2;
grid-row-start:3;
grid-row-end:4;

吞并旁边的单元格合并

grid-column-start:1;起始的位置grid-column-end:2;结束的位置

grid-row-start:3;起始的位置grid-row-end:4;结束的位置

简写
grid-column:1/3;  简写横向列吞并起始是1，结束是3 
grid-row:1/3;   简写纵向吞并起始是1，结束是3