继续W3Schools响应式网页布局的实现，今天我们来说说CSSGrid的解决方案。CSSGrid是为二维布局设计的，最适合网页布局。目前主流浏览器已经支持CSSGrid。除非你确定你的用户经常使用旧版浏览器，否则，建议使用CSSGrid来设计网页布局。如果对CSSGrid不熟悉，可以参考以下教程：CSSGrid（CSSGrid）完整教程W3SchoolsCSSGrid教程CSSGrid实现响应式网页布局示例视频链接YouTubeCSSGrid通过CSSGrid实现响应式网页布局有许多实现响应式网页布局的方法。最简单也是最好的体现CSSGrid特性的方式就是使用grid-template-areas（注意是复数，末尾是s）。这个方法也可以分为三个步骤：给每个Griditem取一个名字；使用grid-template-areas来控制每个Griditem占用的空间；通过MediaQuery改变每个Griditem占用的空间。在W3Schools示例中，每个div从一开始就有一个对应的名称：.item1{grid-area:header;}.item2{网格区域：菜单；}.item3{网格区域：主要；}.item4{网格区域：右；}.item5{网格区域：页脚；注意这里的grid-area是单数的。然后控制它们在包含这些div的容器中所占的空间比例。.grid-container{显示：网格；grid-template-areas:'headerheaderheaderheaderheaderheader''menumainmainmainmainmainrightright''menufooterfooterfooterfooterfooter';网格间隙：10px；背景色：#2196F3；padding:10px;}重点是grid-template-areas，可以看到这里的设置就是CSSGrid最终的显示效果。其中，menu是最小宽度单位，header等于六个菜单；main等于三个菜单；right等于两个菜单；和页脚等于五个菜单。菜单的宽度为1个单位，但其高度跨越两行。在W3Schools的例子中，没有实现响应式部分，但是我们可以自己添加媒体查询部分来实现。通过这个实现，你可以看到CSSGrid神奇、直观、易用的特点。@mediascreenand(max-width:700px){.grid-container{grid-template-areas:'header''menu''main''right''footer'}}在媒体查询部分，只需更改网格-模板区域的设置可以改变整个布局。同样，此示例不应用移动优先原则。您还可以将此示例更改为移动优先作为练习。由于我在前两篇文章中尝试过，这里不再赘述。W3Schools系列的代码都在GitHub上：W3SchoolsGitHubW3Schools教学系列W3Schools是一个知名的网页设计/前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详细教学，还可以用作文档（Documents）。有经验的前端都或多或少接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的HowTo部分包含了很多非常实用的例子，例如如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。所以我想制作一系列专门介绍这些操作方法的视频。所有W3Schools系列视频：FloatResponsiveWebLayoutFlexboxResponsiveWebLayoutCSSGridResponsiveWebLayoutSlideshow如何实现响应式导航如何实现响应式导航
