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

一、引言CSS网格布局主要抓住两个核心：先确定轴线方向上的元素，然后确定对齐方式，这样开发起来就会顺畅很多。本教程主要围绕CSS网格布局进行实战开发，网格系统布局非常强大，你可以不用依赖第三方框架快速设计页面。如果你还不大了解CSS网格布局可以参考上一篇的教程：CSS网格布局入门详解。
二、女装页面设计需求分析我们的页面设计目标主要是参考京东女装首页，虽然是模仿界面练习，但是还是需要进行基本的需求分析。一看到就马上写代码不是一个好习惯，如果还没大概想好就做，后面问题会很多，浪费不必要的时间和精力。
需求是什么？标准的需求定义在经济学中，但是它不是一个触不可及的名词，很通俗的名词，不必过多纠结它的意思，需求就是：你需要什么？需要衣、食、住、行、性需求。在这里是指页面要提供的功能。
要说明这个并不容易，要切记需求必不可少，它提供软件设计的基本参考，没需求就是圣人，什么都不用做。
下面的分析并非严格的分析，因为已经有实在的网页参考了，都是简单地直接取功能，简单粗暴。
下面开始分析，主要对下面两张截图中的内容分析，其它的就不需要了，毕竟整个页面比较复杂。京东女装首页地址：https://channel.jd.com/women.html

文章图片

文章图片
1、顶部
因为顶部还有很多菜单，就不设计这些菜单了，去除菜单功能，仅保留顶部的部分链接文字内容：
左边：首页链接；
右边：注册链接、登录链接；
2、横幅广告保留
3、Logo一行保留，细节去除，保留的内容：
Logo和标题
搜索框
购物车按钮
4、商品分类整一行的内容均保留，展开菜单不实现，保留的功能：
分类菜单
导航
【如何更容易地快速学会网格布局（CSS Grid Layout进阶设计实战（模仿京东女装首页（二）））】图片轮播
商品推荐展示
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="http://www.srcmini.com/#"> < i class="home icon"> < /i> 女装首页< /a>
< a class="item" href="http://www.srcmini.com/#"> < 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张图片，可见其实现方式简单快捷。
效果图如下：

文章图片
7、商品推荐Grid网格布局
这个和上一个的实现相似，直接看效果吧：

文章图片
五、网页完成最终效果

文章图片
六、项目完整源码github下载地址：https://github.com/onnple/grid_shop
七、结语项目整体开发并不难，关键地方在于灵活掌握CSS网格布局的使用，以及熟练第三方框架的使用。某些控件如果单纯原生开发的话会很费时间，像菜单、轮播、输入框、按钮样式等，我们可以利用第三方框架进行实现，另外也需要在第三方框架的基础上自定义样式。