Grid布局-简单语法

基本知识点

• Grid布局和flex布局一样，也分container和items样式。
• Grid布局适用于二维布局，而flex布局更多用于一维布局。

container样式

• grid-template-columns 可以通过该属性规划出次轴（列）的布局
• grid-template-rows 可以通过该属性规划出主轴（行）的布局
• grid-template-areas 可以通过该属性直接确定二维布局
  示例：

//假设父元素container里面有5个items，分别是header、aside、main、ad、footer,html代码分别是
{
 

   
headeraside
   
main
   
ad
   
footer
 
}
css代码：
.container{
 display:grid;
 grid-template-areas:
 "header header header"
 "aside main ad"
 "footer footer";//实际上就是三行三列
}
.container>header{
 grid-area:header; //意思是将header填满container中定义为header的区域
}
.container>aside{
 grid-area:aside; //意思是将aside填满container中定义为aside的区域
}
.container>.ad{
 grid-area:ad;
}
.container>footer{
 grid-area:footer;
}

属性取值:50px、25%、auto、1fr（free space,可以简记为份)。

items样式

• grid-row-start 设置items所在行的起始位置
• grid-row-end 设置items所在行的最终位置
• grid-column-start 设置items所在列的其实位置
• grid-column-end 设置items所在列的最终位置
• grid-gap 规定items之间的空隙
  grid-column-gap:规定items之间左右的空隙
  grid-row-gap:规定items之间上下的空隙
• grid-template-areas 分区
  备注：
  以上属性的取值可以通过本身设置的行数列数以及确定设置行数列数的线条数量结合进行属性的取值，比如规划出一个三行五列的布局，规划出三行需要通过四根线来进行布局，如果想让items项占据一行，则取值需要取到第二根线的位置，以此类推。