网格布局

网格布局的优势：可以将页面的视觉顺序与标签的书写顺序进行解耦。
1.网格的四个组成部分
（1）线：线的序号从一开始，可以给线指定名称，以便在CSS代码中引用它们。
（2）轨道：两根线之间的间隔部分。
（3）单元格：单元格为垂直线和水平线之间的交错部分。
（4）区域：一个区域是可以由开发者指定的单元格组成的矩形。可以给指定区域指定姓名。
2.定义网格布局
（1）提供网格容器

.container{
   
display:grid;
grid-template-rows: 200px 100px; //网格模板，定义两行，第一行高为200px,第二行高100px.
//grid-template-rows: auto  //以内容自动定义行高
grid-template-columns: repeat(4,100px); //定义四列宽度都为100px

(2)以线为基础的排版

grid-row-start: 1;  //使用线的序号排放元素
gird-row-end: 2;
</