如何更容易地快速学会网格布局？CSS Grid Layout进阶设计实战：模仿京东女装首页（二）

一、引言

CSS网格布局主要抓住两个核心：先确定轴线方向上的元素，然后确定对齐方式，这样开发起来就会顺畅很多。本教程主要围绕CSS网格布局进行实战开发，网格系统布局非常强大，你可以不用依赖第三方框架快速设计页面。如果你还不大了解CSS网格布局可以参考上一篇的教程：CSS网格布局入门详解。

二、女装页面设计需求分析

我们的页面设计目标主要是参考京东女装首页，虽然是模仿界面练习，但是还是需要进行基本的需求分析。一看到就马上写代码不是一个好习惯，如果还没大概想好就做，后面问题会很多，浪费不必要的时间和精力。

需求是什么？标准的需求定义在经济学中，但是它不是一个触不可及的名词，很通俗的名词，不必过多纠结它的意思，需求就是：你需要什么？需要衣、食、住、行、性需求。在这里是指页面要提供的功能。

要说明这个并不容易，要切记需求必不可少，它提供软件设计的基本参考，没需求就是圣人，什么都不用做。

下面的分析并非严格的分析，因为已经有实在的网页参考了，都是简单地直接取功能，简单粗暴。

下面开始分析，主要对下面两张截图中的内容分析，其它的就不需要了，毕竟整个页面比较复杂。京东女装首页地址：https://channel.jd.com/women.html

1、顶部

因为顶部还有很多菜单，就不设计这些菜单了，去除菜单功能，仅保留顶部的部分链接文字内容：

左边：首页链接；

右边：注册链接、登录链接；

2、横幅广告保留

3、Logo一行保留，细节去除，保留的内容：

Logo和标题

搜索框

购物车按钮

4、商品分类整一行的内容均保留，展开菜单不实现，保留的功能：

分类菜单

导航

图片轮播

商品推荐展示

5、下面的部分仅实现一种【品牌上新】商品展示样式：

品牌展示

是不是很简单？每个人都会！当然这是因为有模仿对象了，让我们继续。。。

三、女装页面布局设计分析

因为我们主要是练习CSS网格布局设计，所以本教程会尽量使用Grid布局，从网格布局方面考虑。

我们主要是从整体到局部分析：

1、整个页面：网页主要内容在中间，这里取内容宽度为1200px，暂不考虑响应式的问题；

2、内容部分：顶部、广告横幅、logo一行、导航、分类菜单一行、品牌展示，自上而下都是线性的，也就是每种内容都占据了一行。我们可以整体使用grid设置为1列5行；

3、Logo一行：logo+标题+搜索+购物车，都是横向排版的。这里grid布局可以采取1行3列。导航类似；

4、分类菜单和广告导航左右两列，广告导航内再嵌套grid上下布局；

大概布局方向如下：

主要就是先垂直切分主要元素，再水平细切分元素。这个也很简单吧，也是每个人都会的操作。

下面我们分析一下需要使用的技术和工具：

1）整体布局：经过上面的简单分析，整体使用Grid网格布局是没有问题的，除了一些复杂的控件使用第三方框架，其它均采用Grid布局；

2）控件元素：这里为简单起见，使用第三方布局框架Semantic-ui中的控件；

3）轮播图：使用boostrap4的轮播；

4）图片文字资源：根据情况，部分直接取京东的。

到这里我们基本清楚设计的内容和如何布局了，一步一步来，先了解清楚你要做的内容，开发起来会更轻松。

下面开始具体的代码设计。。。

四、女装页面布局设计实现细节

1、搭建整体的布局框架

HTML代码如下：

<div class="top">

    <!--顶部内容-->

    <header class="header">

        <div class="begin">

            <a class="item" href="#"><i class="home icon"></i>女装首页</a>

            <a class="item" href="#"><i class="map marker alternate icon"></i>北京</a>

        </div>

        <div class="end">



        </div>

    </header>

</div>



<!--主要内容-->

<div class="wrapper">

    <!--广告横幅-->

    <div class="banner">



    </div>



    <!--logo一行的内容-->

    <div class="bar">



    </div>



    <!--导航-->

    <div class="navigation">



    </div>



    <!--商品分类一行-->

    <div class="splash">



    </div>



    <!--品牌展示-->

    <div class="goods">



    </div>



</div>

CSS代码如下：

/*主要内容*/
.wrapper{
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
}


/*顶部内容 - 开始*/
.top{
    width: 100%;
    background-color: #e3e4e5;
}
.top .header{
    width: 1200px;
    height: 30px;
    margin: 0 auto;
    font-size: 12px;
    display: grid;
    grid-template-columns: auto;
    align-items: center;
}
.top .header a{
    color: #999;
    margin-right: 12px;
}
.top .header a:hover{
    color: #f46;
}
.top .header .begin{

}
.top .header .end{

}
/*顶部内容 - 结束*/


/*广告横幅 - 开始*/
.wrapper .banner{
    height: 70px;
    background-color: rgba(255, 105, 139, 0.64);
}
/*广告横幅 - 结束*/


/*logo一行的内容 - 开始*/
.wrapper .bar{
    height: 87px;
    background-color: #d2aeff;
}
/*logo一行的内容 - 结束*/


/*导航 - 开始*/
.wrapper .navigation{
    height: 33px;
    margin-top: 10px;
    background-color: #e5a957;
}
/*导航 - 结束*/


/*商品分类一行 - 开始*/
.wrapper .splash{
    height: 640px;
    padding-bottom: 45px;
    background-color: #e56aa5;
}
/*商品分类一行 - 结束*/


/*品牌展示 - 开始*/
.wrapper .goods{
    height: 447px;
    background-color: #d5e582;
}
/*品牌展示 - 结束*/

效果图如下：

分析：

CSS布局中主要在两处使用Grid布局：

1）.top .header头部中，设置align-items:
center让header的内容居中；

2）.wrapper主要内容中，主要是让.wrapper的单元网格占据整列，然后线性向下布局内容。

2、布局顶部内容

关键CSS布局代码如下：

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

将头部header网格容器分为两部分网格区域“begin”和“end”，“begin”为左边的内容，“end”是右边的内容。网格单元格分别通过grid-area指定所属网格区域。顶部布局完成，效果图如下：

3、广告横幅布局

这个比较简单，使用了京东的广告图片进行展示。

4、Logo一行布局

.wrapper .bar{
    height: 87px;
    /*background-color: #d2aeff;*/
    display: grid;
    grid-template-columns: 242px repeat(2,auto);
    align-items: center;
}

简单起见这里仅repeat 2次平均宽度，相对更好的方式是指定网格区域，让元素左对齐，然后让元素自身margin留白。效果图如下：

5、导航栏布局

CSS代码如下：

.wrapper .navigation{
    height: 33px;
    margin-top: 10px;
    /*background-color: #e5a957;*/
    display: grid;
    grid-template-columns: 242px auto;
    align-items: center;
}

列方向起始固定242px宽度的像素，后面自动调整，这个比较简单，效果图如下：

6、分类菜单一行

这个相对比之前的稍微复杂一些，因为涉及到嵌套布局。首先整体布局我们可以采取水平两个单元格，然后第二个单元格再进行二次Grid网格布局。第二个网格单元格设置垂直两行单元格，水平方向填充。

水平左右CSS主要网格布局代码如下：

.wrapper .splash{
    height: 640px;
    padding-bottom: 45px;
    /*background-color: #e56aa5;*/
    display: grid;
    grid-template-columns: 242px auto;
    grid-template-rows: 640px;
}

第二单元涉及的网格布局如下：

.wrapper .splash .ads{
    height: 640px;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 380px auto;
}
.wrapper .splash .ads .gallery{
    display: grid;
    grid-template-columns: repeat(4,auto);
}

.ads代表第二个单元格，采取上下两行布局，下面需要均匀展示4张图片，可见其实现方式简单快捷。

效果图如下：