12.28用Grid网格布局重写网页组件

今天学习了Grid网格布局，以下是HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid布局</title>
    <link rel="stylesheet" href="public-second-hand.css">
</head>
<body>
<div class="public-second-hand">
    <div class="item1">
        <a href="">抢好货</a>
        <div>
            <span>0低价</span>
            <span>安全</span>
            <span>便捷</span>
            <span>快速</span>
        </div>
    </div>
    <div class="item2">
        <span>热门分类</span>
        <div>
            <a href="">美女写真</a>
            <a href="">日本美女</a>
            <a href="">美国美女</a>
            <a href="">国内美女</a>
            <a href="">AV美女</a>
        </div>
    </div>
    <div class="item3">
        <div class="item3-pic">
               <img src="../static/images/shop/shop8.jpg" alt="">
               <span>美女性感写真海报墙艺术装饰画帖画图1</span>
               <span>&yen;333</span>
               <span>美女</span>
           </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
        <div class="item3-pic">
            <img src="../static/images/shop/shop8.jpg" alt="">
            <span>美女性感写真海报墙艺术装饰画帖画图1</span>
            <span>&yen;333</span>
            <span>美女</span>
        </div>
    </div>
    <div class="item4">
        <div class="item4-quick">
            <a href=""><img src="../static/images/ad/1.png" alt=""></a>
        </div>
        <div class="item4-quick">
        <a href=""><img src="../static/images/ad/1.png" alt=""></a>
    </div>
        <div class="item4-quick">
            <a href=""><img src="../static/images/ad/1.png" alt=""></a>
        </div>
        <div class="item4-quick">
            <a href=""><img src="../static/images/ad/1.png" alt=""></a>
        </div>
        <div class="item4-ad1"><img src="../static/images/ad/image.png" alt=""></div>
        <div class="item4-ad2"><img src="../static/images/ad/ad2.jpg" alt=""></div>
    </div>
</div>
</body>
</html>

CSS代码

@import "../public-reset.css";
/*设置网格大小*/
.public-second-hand{
    width: 1200px;
    height: 580px;
    display: grid;
    /*grid-gap: 10px 10px;*/
    box-sizing: border-box;
    background-color: white;
    margin: 30px auto;
    /*画网格列方向4列*/
    grid-template-columns: 1fr 1fr 1fr;
    /*画网格行方向3行*/
    grid-template-rows: 60px 60px 1fr;
    outline: 1px dashed red;
    border-radius: 10px;
}
/*设置第一个项目第一行排列合并*/
.public-second-hand>.item1{
    /*background-color: red;*/
    grid-column: 1 / 4;
    grid-row: 1 ;
    display: flex;
    align-items: end;
    border-bottom: 1px solid lightgray;
    margin: 0 10px;
    padding: 10px 0;
    box-sizing: border-box;
}
/*设置第一个标题A标签大小*/
.public-second-hand>.item1>a{
    font-size: 24px;
}
/*设置A标签旁边项目的距离*/
.public-second-hand>.item1>div{
    margin-left: 10px;
}
/*设置SPAN颜色*/
.public-second-hand>.item1>div>span{
    color: red;
}
/*设置第二个项目第二行排列合并*/
.public-second-hand>.item2{
    /*background-color: yellowgreen;*/
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    display: flex;
    align-items: end;
    margin: 0 10px;
    padding-bottom: 20px;
    box-sizing: border-box;
}
.public-second-hand>.item2>span{
    font-size: 24px;
    color: red;
}
.public-second-hand>.item2>div>a{
    margin: 0 10px;
}
/*设置第三个项目第三行和第一到第二列合并*/
.public-second-hand>.item3{
    width: 800px;
    height: 460px;
    /*background-color: lightsalmon;*/
    grid-column: 1 / 3;
    grid-row: 3 / 4 ;
    display: grid;
    /*画网格列方向4个相同大小*/
    grid-template-columns: repeat(4,190px);
    /*画网格行方向2个相同大小*/
    grid-template-rows: repeat(2,1fr);
    padding-left: 10px;
    box-sizing: border-box;
    grid-gap: 20px 0;
}
.public-second-hand>.item3 img{
    width: 180px;
    height: 124px;
    border: 1px solid lightgray;
    border-radius: 5px;
}
.public-second-hand>.item3>.item3-pic{
    display: grid;
    justify-items: center;
    /*列方向2个相同大小*/
    grid-template-columns: 1fr 1fr;
    /*行方向3行*/
    grid-template-rows: 130px 1fr 1fr;
}
.public-second-hand>.item3>.item3-pic > img{
    /*合并网格从列1号线开始，相邻两条列线，行方向第一行*/
    grid-column: 1 / span 2;
    grid-row: 1 / 2;
}
.public-second-hand>.item3>.item3-pic >span:first-of-type{
/*合并网格从列1号线开始，相邻两条列线，行第2条线开始，第三条线结束，相交区域合并*/
    grid-column: 1 / span 2;
    grid-row: 2 / 3;
    align-self: center;
}
.public-second-hand>.item3>.item3-pic >span:nth-of-type(2){
    /*单独设置项目在列方向的对齐方式*/
    align-self: center;
    /*设置项目在行方向的对齐方式*/
    justify-self: flex-start;
}
.public-second-hand>.item3>.item3-pic >span:last-of-type{
    /*单独设置项目在列方向的对齐方式*/
    align-self: center;
    /*设置项目在行方向的对齐方式*/
    justify-self: end;
    background-color: lightgreen;
    padding: 3px;
    border-radius: 5px;
    color: white;
}
.public-second-hand>.item4{
    /*转为网格布局*/
    display: grid;
    /*两列*/
    grid-template-columns:1fr 1fr;
    /*四行*/
    grid-template-rows:130px 130px 1fr 1fr;
    padding-right:5px;
    grid-gap: 10px 0;
    box-sizing: border-box;
}
.public-second-hand>.item4>.item4-quick{
    padding-right:10px;
    box-sizing: border-box;
}
.public-second-hand>.item4>.item4-ad1{
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    align-self: end;
    margin-top: 10px;
}
.public-second-hand>.item4>.item4-ad2{
    grid-column: 1 / 3;
    grid-row: 4 / 5;
    align-self: center;
}

效果图

第一次使用Grid网格不就，第一个感觉就是别扭，需要去计算每一行，每一列要去给多少像素，最开始整体布局用Grid布置出来了，在两个标题还是嵌套了Flex去写，后来想了想今天学的Grid布局，最好就用网格布局来写，在下面主体内容都是用网格布局，慢慢写出来的，发现在项目对齐上有些属性和Flex有共同处。
最近接受的知识有点多，需要慢慢的去消化一下才行，没事还得复习一下前几天的内容，不然久了容易忘记。
比如FORM表单的内容，现在感觉都已经很模糊了= =，今天把作业提交了，明天就开始复习一下，不然就是猴子掰苞谷，一直拿一直丢。

相关文章