HTML布局之grid布局

1. 关于grid布局

1.1 什么是grid布局

grid布局：grid布局是非常强大的css布局，它将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

1.2 容器和项目的基本概念

• 容器：整个采用网格布局的区域叫做容器（container）
• 项目：容器内部采用网格定位的子元素叫做项目（item）

1.3 行、列、网格线、单元格、轨道的基本概念

• 行、列：容器中划分的水平区域叫做行，如上图粉色区域；垂直划分区域叫做列，如上图黄色区域。
• 单元格：行和列的交叉部分叫做单元格，如上图紫色覆盖区域，一般来说n行 m列会产生n x m个单元格。
• 网格线：划分区域的线叫做网格线，如上图桔黄色的线，一般来说，n行会有n+1根水平的网格线，m列同样有m+1根垂直的网格线。
• 轨道：两根网格线之间的空间

2.容器属性

2.1 display属性

display：grid可以指定采用网格布局

在body里写了9个div，一般情况下的表现形式如上图所示，现在给body设置display属性，

<style>
    body{
   
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
    }

设置display以后，div占满了body，现在需要我们划分行和列。

2.2 grid-template-columns ；grid-template-rows；grid-template （设置行、列）

grid-template-columns：定义网格布局中的列数，并可定义每列的宽度
grid-template-rows ：定义网格布局的行数以及行高
grid-template ：是grid-template-rows ，grid-template-columns简写
grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);（创建一个三行每行高度200px 三列每列宽度100px 的网格）

现在划分一个三行三列的网格，行高和列宽均为100px的网格布局

 body{
   
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }

该属性其他取值：
（1）百分比（length）：占用容器的百分之多少

（2）repeat：重复，他需要两个参数，第一个是划分了几行或几列，第二个是重复的值，
如果划分了三行，并且每行行高100px，那么就可以用repeat来写：grid-template-rows:repeat（3,100px）

 body{
   
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,100px);
        grid-template-rows: repeat(3,100px);
    }

和我们每一项罗列出来效果是一样的。
（3） auto : auto关键字表示由浏览器自己决定长度

body{
   
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns:auto 100px  auto;
        grid-template-rows: repeat(3,100px);
    }

（4）minmax：它表示一个长度范围，接受两个参数，一个是最小值，一个是最大值：

 body{
   
        width: 900px;
        height: 600px;
        margin: auto