网格布局

网格布局的优势：可以将页面的视觉顺序与标签的书写顺序进行解耦。
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;

如果继续放置网格项，但不指定它们的排放位置，浏览器会根据内容尺寸来决定轨道大小。

（3）在你的网格布局中的行和列之间添加间隙

grid-gap: 3px;
//单独定义列与列或行与行之间的间隙
grid-column-gap: 1px;
grid-row-gap: 1px;

网格布局引入的单位：fr: 1fr代表可得到空间的1份。

（4）命名网格线

CSS代码：

.container{
    display: grid;
    width: 100%;
    height: 600px;
    grid-gap: 1rem;
    grid-template-columns: //利用以空格分隔的值定义网格的列和行。值的大小代表轨道的大小，并且他们之间的空格表示网格线
    [main-start sidebar-start] 200px
    [sidebar-end content-start] 1fr
    [column3-start] 1fr
    [content-end main-end];
    grid-template-rows: 
    [row1-start] 80px
    [row2-start] 1fr
    [row3-start] 1fr
    [row4-start] 100px
    [row4-end]; 
}
.container div{
    border: 1px solid lightblue;
}
.header{
    grid-column: main-start / main-end;
    grid-row: row1-start / row2-start;
}
.content1{
    grid-column: content-start / content-end;
    grid-row: row2-start / row3-start;
}
.content2{
    grid-column: content-start / column3-start;
    grid-row: row3-start / row4-start;
}
.content3{
    grid-column: column3-start / content-end;
    grid-row: row3-start / row4-start;
}

HTML代码：

 <div class="container">
 	 <div class="header">网页头部</div>
     <div class="sidebar">侧边栏</div>
     <div class="content1">内容1</div>
     <div class="content2">内容2</div>
     <div class="content3">内容3</div>
     <div class="footer">footer</div>
 </div>

（5）使用区域

CSS代码:

.container{
    display: grid;
    grid-template-rows: 100px auto 100px;
    height: 500px;
    grid-template-columns: 100px auto;
    grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}
.header{
    grid-area: header;
}
.sidebar{
    grid-area: sidebar;
}
.content{
    grid-area: content;
}
.footer{
    grid-area: footer;
}
.container div{
    border: 1px solid lawngreen;
}

HTML代码:

<div class="container">
 	<div class="header">网页头部</div>
    <div class="sidebar">网页边栏</div>
    <div class="content">网页内容</div>
    <div class="footer">网页脚注</div>
</div>