Grid重写二手商品交易组件页面最终效果
网页dom结构分析和思路
采用flex布局的二手交易html代码，并做了一点细微的调整。将其放入一个三行两列的网格中，根据自己的习惯也可以先分成一个一行两列的网格。这里是分的三行两列，并创建网格区域模板。
在网格容器中，抢好货（title1）合并第一行的2个单元格效果，html代码中div（class=title1）项目通过grid-area：title1让内容放入指定网格区中。热门分类（title2）实现的方式和抢好货（title1）一样。
热门分类下方的商品展示区（goode-list），画出一个两行四列的网格，通过grid-gap设置列和行的间距。
右侧功能快速入口区（quick-entry）是一个四行两列的单元格，第三行和第四行合并同行的单元格。
html代码和css样式
html代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><link rel="stylesheet" href="public_second_hand.css"><title>公共二手交易区组件</title></head><body><!--导入大标题组件--><div class="public-headline"><span>二手交易</span></div><!--二手交易区--><div class="public-second-hand"><!--标题一--><div class="title1"><a href="">抢好货</a><span>0低价，便捷，安全，快速</span></div><!--标题二--><div class="title2"><span>热门分类</span><a href="">美女写真</a><a href="">日本美女</a><a href="">美国美女</a><a href="">国内美女</a><a href="">AV美女</a></div><!-- 商品展示区--><!-- 1.左侧为商品列表 --><div class="goods-list"><!--商品简介--><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div><div class="intro"><a href=""><img src="../../static/images/shop/shop1.jpg" alt="" width="176" height="120"></a><a href="">美女性感写真海报墙艺术装饰画贴画图1</a><div><span>¥333</span><span>美女</span></div></div></div><!--2.右侧功能快速入口 --><div class="quick-entry"><a href=""><img src="../../static/images/ad/1.png" alt=""></a><a href=""><img src="../../static/images/ad/2.png" alt=""></a><a href=""><img src="../../static/images/ad/3.png" alt=""></a><a href=""><img src="../../static/images/ad/4.png" alt=""></a><a href=""><img src="../../static/images/ad/image.png" alt=""></a><a href=""><img src="../../static/images/ad/ad2.jpg" alt=""></a></div></div></body></html>
css代码
/*导入元素的公共初始化样式表*/@import "../public_reset.css";/*大标题组件*/@import url(../public_headline/public_headline.css);.public-second-hand{width: 1200px;padding: 10px;box-sizing: border-box;margin: auto;background: white;border-radius: 5px;/*将容器转为grid容器*/display:grid;/*画网格，整体分为三行两列布局*/grid-template-columns: 760px 440px;grid-template-rows: 50px 55px 440px;/*给网格区域命名*/grid-template-areas: 'title1 title1''title2 title2''goods-list quick-entry';}.public-second-hand:hover{box-shadow: 0 0 8px #888;}.public-second-hand >.title1{/*给项目命名*/grid-area: title1;border-bottom: 1px solid #ccc;}.public-second-hand >.title1 > a{font-size: 23px;margin-right: 20px;}.public-second-hand >.title1 > span{color:red;}.public-second-hand >.title2{/*给项目命名*/grid-area: title2;}.public-second-hand >.title2>span{color:red;font-size: 23px;}.public-second-hand >.title2>a{padding-left:20px;;}.public-second-hand >.goods-list{padding: 10px;/*给项目命名*/grid-area: goods-list;/*转为grid容器*/display: grid;/*将主体划分为两行四列网格*/grid-template-columns: repeat(4,178px);grid-template-rows: repeat(2,200px);/*行间距15px，列间距10px*/grid-gap: 15px 10px;}.public-second-hand >.goods-list img{border-radius: 5px;border: 1px solid #ccc;display: block;}.public-second-hand >.goods-list a{display: block;margin-bottom: 13px;}.public-second-hand >.goods-list img:hover{box-shadow: 0 0 8px #ccc;}.public-second-hand >.goods-list>.intro>div{/*为了不使用float属性，转为flex容器*/display: flex;justify-content: space-between;}.public-second-hand >.goods-list>.intro>div>span:first-of-type{color:red;}.public-second-hand >.goods-list>.intro>div>span:last-of-type{background: #55a532;color: white;padding: 0 3px;}.public-second-hand >.quick-entry{padding: 10px;/*给项目命名*/grid-area: quick-entry;/*转为grid容器*/display: grid;/*将主体划分为四行两列网格*/grid-template-columns: repeat(2,190px);grid-template-rows: 130px 130px 60px 60px;/*行间距12px，列间距25px*/grid-gap: 12px 25px;/*网格区域命名*/grid-template-areas:'img1 img2''img3 img4''img5 img5''img6 img6';}.public-second-hand >.quick-entry a img{width: 190px;height: 130px;}.public-second-hand >.quick-entry a:nth-of-type(5){grid-area: img5;}.public-second-hand >.quick-entry a:last-of-type{grid-area: img6;}.public-second-hand >.quick-entry a:nth-of-type(5) img,.public-second-hand >.quick-entry a:last-of-type img{width: 393px;height: 60px;}
手写grid.md课堂文档
总结
写代码不管是前端还是后端，走出动手的第一步才行。起初一直怕写不出来，躲避不去动手写。当写了后才发现，真的没那么难。结构分析，有了思路，能够更快的写出网站dom结构。
简单的文字链接直接用a标签，纯文本推荐span标签。标签gird布局虽然不错，但是在处理细节部分真赶不上flex布局好用。flex和gird相配合，能够更快的实现效果。需要注意的是，放在同一个网格中的每个项目必须是同级关系才能放进去。