继承W3Schools响应式网页规划的完成，本日讲的是CSS Grid计划。CSS Grid就是为二维规划设想的，最适合用来做网页规划。现在主流的浏览器都已支撑CSS Grid，除非你很肯定你的用户常运用较旧的浏览器，不然的话，发起运用CSS Grid来设想网页规划。假如你对CSS Grid并不熟习，能够参考以下的教授教养：
视频贯穿连接
CSS Grid响应式网页规划
透过CSS Grid完成响应式网页规划的要领有很多种，最简朴，也最能体现CSS Grid的特性的要领是运用grid-template-areas（注重是复数，末端有s）。这类要领一样可分为三步：
- 为每个Grid项赋予一个名字；
- 用grid-template-areas来掌握每个Grid项所占的空间；
- 经由过程Media Query转变每个Grid项所占的空间。
在W3Schools的例子中，一开始便为每个div取了一个响应的称号：
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }注重这里的grid-area是单数。接着在包括这些div的容器中掌握它们的所占空间比例。
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main right right'
'menu footer footer footer footer footer';
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}重点在于grid-template-areas，能够看到这里的设定就是CSS Grid终究的显现效果。个中menu是最小宽度单元，header即是六个menu；main即是三个menu；right即是两个menu；而footer则即是五个menu。menu的宽度为1个单元，但高度却跨两行。
在W3Schools的例子中，并没有完成响应式的部份，但我们能够自行到场媒体查询的部份来完成。透过这个完成，你能够看到CSS Grid的奇异、直观、易用的特性。
@media screen and (max-width: 700px) {
.grid-container {
grid-template-areas:
'header'
'menu'
'main'
'right'
'footer'
}
}在媒体查询的部份，只需变动grid-template-areas的设定就可以转变悉数规划。
一样地，这个例子也没有采纳挪动优先准绳。你也能够将这个例子改成挪动优先作为演习，由于前两篇中都做过如许的尝试，这里就不再赘述了。
W3Schools系列的代码都在GitHub上：W3Schools GitHub
W3Schools教授教养系列
W3Schools是着名的网页设想／前端开辟教授教养网站，不仅供应HTML、CSS、JavaScript等的详实教授教养，还能够把它看成申明文件（Documents）。有履历的前端或多或少已打仗过这个网站，由于它常常出现在搜刮效果的前几项。个中，它的How To部份更是包括了大批异常有用的例子，比方，怎样制造SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因而我想做一系列的影片特地引见这些How To。
W3Schools系列悉数视频：
