如何更容易地快速学会网格布局（响应式网格布局高阶实战（模仿SegmentFault首页（三））） _Grid布局实战

一、引言CSS网格布局并不难，如何灵活运用网格布局快速开发项目，是每个前端开发者都应该关心的问题。在上一篇中我们看到了Grid布局在页面设计中的使用实例，它的使用实际上非常简单，重在掌握好Grid布局中的轴线方向和对齐方式，你可以在这里找到Grid布局的入门学习教程。
现在我们来实现所有项目都会用到的技术：响应式布局。布局的终极问题恐怕是实现响应式了（和自适应设计），要想设计出更好的界面，响应式布局必不可少。
本教程尝试将CSS网格布局和媒体查询结合实现响应式，选择SegmentFault（https://segmentfault.com/）作为练习对象，因为SegmentFault是典型的响应式网站，有相对多的元素值得我们学习。
二、响应式页面功能需求首先我们知道响应式布局主要是利用媒体查询实现，媒体查询的实质是调用了不同的CSS布局代码，针对媒体查询，布局代码主要提供两种功能：
1、隐藏或显示不必要或需要的内容；
2、改变布局代码；
隐藏显示内容是最简单的，而且不用过多修改代码，造成调试混乱。而修改布局代码则有可能造成布局混乱，我们应该尽可能少地修改原有的布局代码，通过新增需要的页面内容来达到项目需求。
在这里我们设桌面端的浏览页面为参考对象，即移动端的页面是根据桌面端的页面设计得到的。这样在切换不同平台设计页面的时候，我们就可以知道，哪些内容不需要，哪些内容需要保留，哪些可选。不需要内容一般直接隐藏，可选内容根据需要设计。总的来说，主要是以网页主体内容为中心，对其它内容进行增删改。
以上是对媒体查询的操作的简要说明，下面我们对桌面端和移动端的页面进行分析，主要是以桌面端为参考对象。
1、桌面端页面功能需求
1）顶部导航栏：logo，导航条目、登录，注册
2）左侧栏：为你推荐、近期热门、最新内容、技术频道
3）主体内容：广告轮播、文章主体
4）右侧栏仅做简要填充
2、移动端页面功能需求
1）顶部：搜索、Logo、用户
2）导航：为你推荐、近期热门、最新内容、技术频道
3）主体内容：广告轮播、文章主体
4）底部导航栏：首页、问答、专栏、讲堂
现在你可以通过对比桌面端和移动端的功能需求，找到必须的内容，不需要的内容，以及一些可选的内容，切换到移动页面还需要相应地增加内容。
三、项目开发中使用到的技术和工具1、使用Grid网格布局作为全局布局；
2、使用CSS的媒体查询实现页面切换；
3、部分控件使用Semantic或Boostrap，如使用Semantic的按钮和搜索框，boostrap的轮播图等；
四、响应式网格布局实现详情1、桌面端页面设计细节
1）基本设置
新建html文档，在文档头部添加：

< meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

新建两个CSS文件：grid_responsive.css、grid_responsive_phone.css，前者用于默认布局，后者用于移动布局，如下：

< link rel="stylesheet" href="http://www.srcmini.com/css/grid_responsive.css"> < link rel="stylesheet" href="http://www.srcmini.com/css/grid_responsive_phone.css" media="screen and (max-width: 767px)">

2）整体布局搭建
HTML代码如下：

< !--顶部导航栏--> < div class="top"> < header class="header"> < div class="begin"> < a class="item" href="http://www.srcmini.com/#">< img src="http://www.srcmini.com/images/dribbble-logo.png">< /a> < ul class="nav"> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">首页< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">问答< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">专栏< /a> < /li> < li class="nav-item"> < a class="nav-link" href="http://www.srcmini.com/#">讲堂< /a> < /li> < /ul> < /div> < div class="end"> < a class="item login" href="http://www.srcmini.com/#">登录< /a> < a class="item" href="http://www.srcmini.com/#">注册< /a> < /div> < /header> < /div>< div class="wrapper"> < !--内容部分--> < div class="content"> < !--左侧栏--> < div class="sidebar-left"> < !--推荐导航--> < div class="hot">< /div>< !--技术频道--> < div class="channel">< /div> < /div>< !--主体内容--> < div class="main"> < !--广告轮播图--> < div class="ads">< /div>< !--文章主体--> < div class="posts">< /div> < /div>< !--右侧栏--> < div class="sidebar-right"> < div class="recommend-item">< /div> < div class="recommend-item">< /div> < div class="recommend-item">< /div> < /div> < /div> < /div>

CSS布局代码如下：

/*主体容器*/ .wrapper{ width: 1200px; margin: 0 auto; }/*顶部导航栏开始*/ .top{ width: 100%; height: 66px; border-bottom: 1px solid #e5e5e5; } .top .header{ width: 1200px; margin: 0 auto; height: 66px; /*background-color: #c6a7ff; */ } /*顶部导航栏结束*//*内容部分*/ .wrapper .content{ margin-top: 30px; display: grid; grid-template-columns: repeat(12,1fr); }/*左侧栏开始*/ .wrapper .sidebar-left{ grid-column: 1 / span 2; padding-right: 15px; } .wrapper .sidebar-left .hot{ height: 104px; background-color: #e9ffad; } .wrapper .sidebar-left .channel{ height: 487px; background-color: #b5c6ff; } /*左侧栏结束*//*主体内容开始*/ .wrapper .main{ grid-column: 3 / span 7; padding: 0 15px; height: 800px; }.wrapper .main .ads{ height: 150px; background-color: #ff90ab; } .wrapper .main .posts{ height: 800px; background-color: #ffdc8a; } /*主体内容结束*//*右侧栏开始*/ .wrapper .sidebar-right{ grid-column: 10 / span 12; padding-left: 15px; display: grid; grid-template-rows: repeat(3,auto); grid-gap: 30px; } .wrapper .sidebar-right .recommend-item{ height: 352px; background-color: #ffa78f; } /*右侧栏结束*/

其中Grid网格布局主要运用在.wrapper .content上，设置grid-template-columns为repeat(12, 1fr)，意思是将该布局容器在水平方向上切分成12份。
网格单元格则是使用grid-column，用于设置水平方向的轨道大小，1/span 2表示，该元素占据的区域从第一个轨道到第二个轨道，即水平方向上占据了2个轨道的大小，效果图如下：

如何更容易地快速学会网格布局（响应式网格布局高阶实战（模仿SegmentFault首页（三）））

文章图片
3）顶部导航栏布局
顶部使用网格布局将水平方向切分成三份，使用grid-template-areas设置区域名称，子元素通过grid-area对应所在区域。Grid-template-columns: auto 1fr，意思是第一个单元格元素自适应，再计算之前的单元格元素占据的区域：

.top .header{
width: 1200px;
margin: 0 auto;
height: 66px;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
grid-template-areas:
"begin nav end";
}

效果图如下：

文章图片
4）左侧栏布局设计
该布局没有用到特殊的布局方式，实现使用的是boostrap的导航菜单，效果如下：

文章图片
【如何更容易地快速学会网格布局（响应式网格布局高阶实战（模仿SegmentFault首页（三）））】5）主体内容设计（轮播图+文章主体）
轮播直接使用bootstrap框架的，文章使用semantic的列表，整体效果如下：

文章图片
2、响应式移动前端设计
终于到重点内容了，首先我们参照上面移动端的需求：
1）把该隐藏的都隐藏了，包括：顶部内容、技术频道、右侧栏，那么剩下的内容就只有推荐导航和主体内容了。
2）调整Grid网格布局，调整热门推荐导航的布局。
3）接着我们需要稍微调整一下文章的图片，初步效果如下：

文章图片
4）以上，我们已经完成了隐藏和修改的操作了，接下来就是新增内容了，新增内容比修改内容更好。在你新增内容的时候，记得要在对应的桌面端的代码里对其隐藏。下面从头进行内容新增操作。
5）移动页面顶部布局
CSS Grid网格布局代码如下：

.top .header-responsive{ height: 100%; padding: 0 27px; display: grid; justify-content: space-between; grid-template-columns: auto 1fr auto; align-items: center; }

另外在推荐频道中添加一项技术频道，效果如下：

文章图片
6）移动端页面底部导航栏设计
该底部导航栏需要使用position布局，将其固定在底部，实际使用中，还需要在向上滑动的时候隐藏，下拉时显示，这里仅做简单展示实现。
五、响应式网页完成效果桌面端界面：

文章图片
移动端界面：

文章图片
六、网站项目源码下载github下载地址：https://github.com/onnple/grid_responsive
七、结语认真看下来，响应式和网格布局，是不是其实也没那么难，就是不知道怎么做而已，先理清好项目的需求，一切皆有下文。CSS的媒体查询和Grid布局还值得去深入实践和扩展学习，只要还有网页设计，布局就停不下来。
响应式布局实战教程推荐：
前端进阶开发实战教程，使用Bootstrap实现博客平台网站响应式布局详解（一）
前端进阶开发实战教程，使用Flexbox模仿Github项目详情页实现响应式布局详解（二）
如何更容易地快速学会网格布局？响应式网格布局高阶实战：模仿SegmentFault首页（三）