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

一、引言

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="css/grid_responsive.css">
<link rel="stylesheet" href="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="#"><img src="images/dribbble-logo.png"></a>
            <ul class="nav">
                <li class="nav-item">
                    <a class="nav-link" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">问答</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">专栏</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">讲堂</a>
                </li>
            </ul>
        </div>
        <div class="end">
            <a class="item login" href="#">登录</a>
            <a class="item" href="#">注册</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个轨道的大小，效果图如下：

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的导航菜单，效果如下：

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首页（三）