CSS Grid响应式网页布局 – W3Schools视频03

9次阅读

共计 1596 个字符，预计需要花费 4 分钟才能阅读完成。

继续 W3Schools 响应式网页布局的实现，今日讲的是 CSS Grid 方案。CSS Grid 就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持 CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用 CSS Grid 来设计网页布局。如果你对 CSS Grid 并不熟悉，可以参考以下的教学：

CSS 网格 (CSS Grid) 完整教学
W3Schools CSS Grid 教学
CSS Grid 实现响应式网页布局例子

视频连结

B 站
YouTube

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 系列全部视频：