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

leejan97 发布于2019-08-30 15:56 / 531人阅读

摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。

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

Float响应式网页布局

Flexbox响应式网页布局

CSS Grid响应式网页布局

幻灯片如何实现

响应式导航如何实现

云服务器私有云响应式布局 asp如何响应式布局 html响应式导布局响应式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117528.html

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

摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。继续W3Schools响应式网页布局的实现，今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用CS...

piapia 2019-08-23 15:57 评论0 收藏0
CSS Grid响应式网页布局 - W3Schools视频03

摘要：继续响应式网页布局的实现，今日讲的是方案。就是为二维布局设计的，最适合用来做网页布局。其中是最小宽度单位，等于六个等于三个等于两个而则等于五个。继续W3Schools响应式网页布局的实现，今日讲的是CSS Grid方案。CSS Grid就是为二维布局设计的，最适合用来做网页布局。目前主流的浏览器都已经支持CSS Grid，除非你很确定你的用户常使用较旧的浏览器，不然的话，建议使用CS...

hufeng 2019-08-05 18:14 评论0 收藏0
响应式网页布局 - W3Schools How-Tos 01

摘要：视频连结站响应式网页布局今天已经是年，基本上所有新建的网页都会是响应式，以适应在手机显示。而实现响应式网页布局主要有种方法当然，以上三者都需要搭配使用。完全就是为了网页布局及其他二维横向加纵向布局而设计的，相信未来的网页都会采用这一设计。 W3Schools教学系列 W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以...

Heier 2019-08-30 15:55 评论0 收藏0
响应式网页布局 - W3Schools How-Tos 01

摘要：视频连结站响应式网页布局今天已经是年，基本上所有新建的网页都会是响应式，以适应在手机显示。而实现响应式网页布局主要有种方法当然，以上三者都需要搭配使用。完全就是为了网页布局及其他二维横向加纵向布局而设计的，相信未来的网页都会采用这一设计。 W3Schools教学系列 W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以...

iOS122 2019-08-05 18:10 评论0 收藏0
响应式导航如何实现 - W3Schools视频05

摘要：系列全部视频响应式网页布局响应式网页布局响应式网页布局幻灯片如何实现响应式导航如何实现响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出，而是显示一个导航图标，点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。 W3Schools 响应式导航教学响应式导航例子视频连结 B站 YouTube 响应式导航（Re...

stefanieliang 2019-08-23 16:15 评论0 收藏0