《网页设计与制作（HTML5+CSS3）立体化项目教程》 课件 20.grid网格布局

网页设计与制作（HTML5+CSS3）主讲教师：周礼萍0

1网格布局基本概念02Grid布局容器属性03Grid布局合并单元格目录contents思考以下效果如何实现？PART1网格布局基本概念网格布局中的基本概念（1）容器和项目采用网格布局的区域，称为“容器”。容器内部的采用网格定位的子元素称为“项目”。<divclass="grid-container"><divclass="item">1</div><divclass="item">2</div><divclass="item">3</div></div>在以上代码中，grid-container就是容器，item就是项目。网格布局中的基本概念（2）容器里的行、列、单元格及网格线容器里的水平区域称为“行”，容器里的垂直区域称为“列”，行列重叠出来的空间组成单元格函数。划分网格的线，称为“网格线”PART2Grid布局容器属性grid容器常见属性

属性说明grid-template-columns设置行的宽度grid-template-rows设置行的高度grid-template-areas使用命名的网格元素，显示行和列grid-column跨列合并grid-row跨行合并grid-area定义网格元素的名称，或者是跨行跨列合并grid-row-gap设置网格之间行与行之间的间距grid-column-gap设置网格之间列与列之间的间距grid-gap复合属性，同时设置了grid-column-gap和grid-row-gap1.grid-template-columns属性/grid-template-rows属性用于设置网格布局中的列数及宽度/用于设置网格布局中的行数及高度1.1属性值可以是数字grid容器常见属性.grid-container{display:grid;

grid-template-columns:150px150px300px150px;grid-template-rows:60px100px;}1.grid-template-columns属性/grid-template-rows属性1.2repeat（m，n）函数repeat接受两个参数：m代表重复的次数，n代表重复的值.grid-container{ display:grid; grid-template-columns:repeat(3,40px)100px;grid-template-rows:repeat(2,40px); }grid容器常见属性1.grid-template-columns属性/grid-template-rows属性1.3auto-fill关键字单元格的大小是固定的，容器的大小不确定。可以使用auto-fill关键字表示自动填充。.grid-container{

display:grid;

grid-template-columns:repeat(auto-fill,100px);}grid容器常见属性1.grid-template-columns属性/grid-template-rows属性1.4fr关键字表示比例关系.grid-container{

display:grid;

height:300px;grid-template-columns:repeat(3,1fr);

grid-template-rows:repeat(3,1fr);}grid容器常见属性1.grid-template-columns属性/grid-template-rows属性1.5属性值auto，自动填满整个空间.grid-container{ display:grid;height:100px;

grid-template-columns:autoautoautoauto;grid-template-rows:40pxauto;

}grid容器常见属性2.grid-gap属性grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式,表示距离.grid-container{ display:grid; grid-template-columns:repeat(4,auto);grid-template-rows:repeat(2,40px);

grid-gap:10px;

background:deepskyblue;

padding:10px;}grid容器常见属性3.grid-template-areas属性/grid-area属性grid-template-areas用于设定网格布局的结构grid-area属性定义的网格区域名称grid容器常见属性<divclass="grid-content"><divclass="grid-itemheader"></div><divclass="grid-itemheader"></div><divclass="grid-itemheader">header</div><divclass="grid-itemnav"></div><divclass="grid-itemmain">main</div><divclass="grid-itemsilder">slider</div><divclass="grid-itemnav">nav</div><divclass="grid-itemfooter"></div><divclass="grid-itemfooter">footer</div></div>.grid-content{width:fit-content;

display:grid;

grid-template-rows:60px300px100px;grid-template-columns:200px400px200px;

grid-template-areas:

'headerheaderheader''navmainslider''navfooterfooter';

grid-gap:10px;}.header{

grid-area:header;}.nav{

grid-area:nav;}.main{

grid-area:main;}.slider{

grid-area:slider;}.footer{

grid-area:footer;}PART3合并单元格1.grid-row属性

grid-row属性定义了网格元素行的开始和结束位置grid-row:grid-row-start/grid-row-end;grid布局合并单元格.item1{grid-row:1/4;}跨行合并起始/结束1.

grid-column属性grid-column属性定义了网格元素列的开始和结束位置grid-column:grid-column-start/grid-column-end;.item1{grid-column:2/4;}跨列合并起始/结束grid布局合并单元格<divclass="grid-content"><divclass="grid-itemone">1</div><divclass="grid-itemtwo">2</div><divclass="grid-itemthree">3</div><divclass="grid-item">4</div><divclass="grid-item">5</div><divclass="grid-itemfour">6</div></div>.grid-content{width:fit-content;display:grid;background-color:rgb(103,187,239);grid-template-rows:repeat(4,100px);grid-template-columns:repeat(3,200px);grid-gap:10px;padding:10px;}.grid-item{background-color:rgb(192,230,225);}.one{

grid-column:1/4;}.two{

grid-row:2/4;}.three{

grid-column:2/4;}.four{

grid-column:1/4;}3.

grid-column属性/grid-row属性span属性跨单元格的个数grid-column：span2;跨列2个单元格

grid-row：span2;跨行2个单元格.grid-container{display:grid;grid-template-columns:repeat(3,auto);

...

}.item1{

grid-row:span3;}.item2{

grid-column:span2;}grid布局合并单元格4.

grid-area属性(两种用途)4.1grid-area属性指定网格元素在网格布局中的大小和位置，是以下属性的简写属性：grid-row-startgrid-column-startgrid-row-endgrid-column-end4.2grid-area属性也可以对网格元素进行命名。命名的网格元素可以通过容器的grid-template-areas属性来引用。grid