}CSS代码：.container{显示：网格;grid-template-areas:"headerheaderheader""asidemainad""footerfooter";//其实是三行三列}.container>header{grid-area:header;//意思是填充header容器中定义为header的区域}.container>aside{grid-area:aside;//表示填充容器中定义为aside的区域}.container>.ad{grid-area:ad;}.container>footer{grid-area:footer;}属性值：50px,25%,auto,1fr（空闲空间，可简写为副本）。itemsstylegrid-row-start设置项目所在行的起始位置grid-row-end设置项目所在行的最终位置grid-column-start设置项目所在列的实际位置itemsarelocatedgrid-column-end设置项目所在列的最终位置positiongrid-gap指定项目之间的间距grid-column-gap：指定项目之间的左右间距grid-row-gap：指定items上下的间距grid-template-areaspartition备注：以上属性的取值可以结合你设置的行数和列数以及决定行数和列数的行数来设置属性的值。比如你规划一个三行五列的布局，你需要用四行来规划三行。如果你想让items项目占一行，那么value需要取到第二行的位置，以此类推。