Web前端开发 课件 6.5 网格布局

静态网页设计第六章核心应用——排版布局网格布局1什么是

网格布局？网格布局适用于哪些场景？2网格布局中的容器和项目34网格“轨道”网格“间隔”5网格布局的基础应用6什么是网格布局？01什么是网格布局？要实现网格布局，需要给网格容器添加display属性：弹性容器{display:grid|inline-grid;

/*将元素设置为网格容器*/

}语法CSS3新增特性是二维布局系统（同时处理“行”“列”）目前CSS最强的布局系统已获主流浏览器⽀持概念网格布局适用于哪些场景？02网格布局适用于哪些场景？常用场景多行多列布局行、列跨度布局后台管理框架页……弹性布局：处理轴线布局（一个维度）网格布局：同时处理行、列（二个维度）对比项目1项目2项目3项目4项目5网格布局的“容器”和“项目”03网格布局的“容器”和“项目”网格容器项目1项目2项目3项目4项目5网格项目网格容器：添加了display:grid属性值的外框网格项目：网格容器内部的子元素网格布局的“容器”和“项目”属性作用grid-template-columnsgrid-template-rows用于划分Grid列和行，即定义每列列宽和每行行高row-gapcolumn-gapgrid-gapgap用于设置子元素间的间隔：row-gap设置行间隔column-gap设置列间隔grid-gap行间隔和列间隔的合并简写gap是grid-gap的简写grid-auto-flow用于设置子元素摆放方式justify-itemsalign-itemsplace-items设置单元格子元素位置：justify-items设置水平方向align-items设置垂直方向place-items是前两者的合并简写grid-auto-columns用于划分Grid列和行，分别定义每一列的列宽、每行行高网格容器的常用属性网格布局的“容器”和“项目”属性作用grid-column-startgrid-column-endgrid-columngrid-row-startgrid-row-endgrid-row用于设置元素占位大小，即跨度。类似于表格中的colspan、rowspangrid-area是以上6个属性的合并简写justify-selfalign-selfplace-self用于设置当前元素位置。justify-self设置水平位置align-self设置垂直方向place-self是前两者的合并简写网格项目的常用属性网格“轨道”04网格“轨道”网格轨道：网格中的“行”和“列”，用于构建网页的内容区域行轨道列轨道列轨道列轨道行轨道项目4项目2项目5项目3项目6项目1网格“轨道”通过网格容器的grid-template-columns

和grid-template-rows

两个属性来定义网格中的行列轨道示例网格容器{display:grid;grid-template-columns:autoautoauto;/*定义列轨道*/grid-template-rows:50px150px;/*定义行轨道*/}50px150pxautoautoauto项目1项目2项目3项目4项目5项目2实现网格“轨道”1fr2fr1fr1fr200px50px等分单位：fr占满剩余空间网格容器{display:grid;grid-template-columns:1fr2fr1fr;}网格容器{display:grid;grid-template-columns:1fr200px50px;}网格“轨道”1fr1fr1fr重复函数：repeat()50px1fr50px1fr网格容器{display:grid;grid-template-columns:repeat(3,1fr);/*grid-template-columns:repeat(2,50px1fr);*/}网格“间隔”04网格“间隔”网格间隔：网格中轨道之间的间隔距离间隔设置：通过网格容器的“row-gap|column-gap|grid-gap|gap”属性来设置row-gapcolumn-gapgrid-gapgap设置行轨道之间的间隔设置列轨道之间的间隔设置所有行列轨道之间的间隔，是row-gap和column-gap的简写也可以看作是grid-gap的缩写网格“间隔”示例网格容器{display:grid;grid-template-columns:1fr1fr;gap:20px;}

项目2项目1项目2项目1项目2项目1项目2项目1

20px20px20px20px网格布局的基础应用05网格布局的基础应用示例快速实现行列跨度布局列跨度：2行跨度：2grid-column:span2;grid-row:span2.container{display:grid;grid-template-columns:1fr1fr1fr;grid-template-rows:repeat(3,80px);gap:15px;}.item{border:3pxsolid#2272ce;}.item:nth-child(2){grid-column:span2;}.item:nth-child(5){grid-row:span2;}后期剪辑：理解网格布局的基本概念，弄清与弹性布局的区别理解网格布局的“容器”“项目”“