Grid实战项目

代码运行效果展示地址

网格布局相册
 模拟12列网格布局
 公共头部
 公共尾部

1、网格布局相册

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的相册</title>
    <style>
        /* 初始化 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        a {
            text-decoration: none;
            color: #555;
        }
        a:hover {
            color: coral;
        }
        body {
            background-color: burlywood;
        }
        h1 {
            color: white;
            text-align: center;
            letter-spacing: 5px;
            font-size: 2.5rem;
            font-weight: 400;
            text-shadow: 2px 2px 2px #555;
            margin-top: 20px;
            overflow: hidden;
        }
        .container {
            display: grid;
            /*画网格-自动填充*/
            grid-template-columns: repeat(auto-fill, 250px);
            grid-template-rows: repeat(auto-fit, 280px);
            /*设置项目在容器上水平垂直都平均对齐*/
            place-content: space-evenly space-evenly;
            row-gap: 10px;
        }
        .container > .item {
            padding: 10px;
            background-color: #eee;
            border-radius: 10px;
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: center;
        }
        .item img {
            width: 100%;
            height: 100%;
        }
        .container > .item:hover {
            box-shadow: 0 0 10px #555;
            width: calc(100% * 1.02);
            background-color: lemonchiffon;
        }
    </style>
</head>
<body>
<h1>我的相册</h1>
<div class="container">
    <div class="item">
        <a href=""><img src="images/pic1.jpg" alt="" /></a>
        <a href="">图片1</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic2.jpg" alt="" /></a>
        <a href="">图片2</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic3.jpg" alt="" /></a>
        <a href="">图片3</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic4.jpg" alt="" /></a>
        <a href="">图片4</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic5.jpg" alt="" /></a>
        <a href="">图片5</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic6.jpg" alt="" /></a>
        <a href="">图片6</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic7.jpg" alt="" /></a>
        <a href="">图片7</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic8.jpg" alt="" /></a>
        <a href="">图片8</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic9.jpg" alt="" /></a>
        <a href="">图片9</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic10.jpg" alt="" /></a>
        <a href="">图片10</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic11.jpg" alt="" /></a>
        <a href="">图片11</a>
    </div>
    <div class="item">
        <a href=""><img src="images/pic12.jpg" alt="" /></a>
        <a href="">图片12</a>
    </div>
</body>
</html>

2、12列网格布局

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟12列网格布局</title>
    <style>
        /*初始化*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            /*水平居中*/
            justify-content: center;
            /*视口*/
            max-width: 100vw;
            min-height: 100vh;
        }
        .container {
            min-width: 1000px;
            display: grid;
            /*网格布局默认创建一列多行*/
            gap: 5px;
        }
        .container > .row {
            /*把 container 下的每一行都划为12等分*/
            display: grid;
            /*把第一行划分为12份*/
            grid-template-columns: repeat(12, 1fr);
            min-height: 50px;
            gap: 5px;
        }
        .container > .row > .item {
            background-color: dodgerblue;
            padding: 10px;
            border: 1px solid;
        }
        /* 常用网格列样式 */
        /*将项目填充到单元格*/
        .col-1 {
            /* 项目从当前默认位置开始放置,所以起始列编号可省略 */
            /*grid-column-start: 1;*/
            grid-column-end: span 1;
        }
        .col-2 {
            grid-column-end: span 2;
        }
        .col-3 {
            grid-column-end: span 3;
        }
        .col-4 {
            grid-column-end: span 4;
        }
        .col-5 {
            grid-column-end: span 5;
        }
        .col-6 {
            grid-column-end: span 6;
        }
        .col-7 {
            grid-column-end: span 7;
        }
        .col-8 {
            grid-column-end: span 8;
        }
        .col-9 {
            grid-column-end: span 9;
        }
        .col-10 {
            grid-column-end: span 10;
        }
        .col-11 {
            grid-column-end: span 11;
        }
        .col-12 {
            grid-column-end: span 12;
        }
    </style>
</head>
<body>
<!--创建容器-->
<div class="container">
    <!--创建行-->
    <div class="row">
        <!--划分列,二等分-->
        <span class="item col-6">6</span>
        <span class="item col-6">6</span>
    </div>
    <!--三等分-->
    <div class="row">
        <span class="item col-4">4</span>
        <span class="item col-4">4</span>
        <span class="item col-4">4</span>
    </div>
    <div class="row">
        <span class="item col-2">2</span>
        <span class="item col-8">8</span>
        <span class="item col-2">2</span>
    </div>
    <div class="row">
        <span class="item col-2">2</span>
        <span class="item col-8">8</span>
    </div>
    <div class="row">
        <span class="item col-1">1</span>
        <span class="item col-1">2</span>
        <span class="item col-1">3</span>
        <span class="item col-1">4</span>
        <span class="item col-1">5</span>
        <span class="item col-1">6</span>
        <span class="item col-1">7</span>
        <span class="item col-1">8</span>
        <span class="item col-1">9</span>
        <span class="item col-1">10</span>
        <span class="item col-1">11</span>
        <span class="item col-1">12</span>
    </div>
</div>
</body>
</html>

3、部份实战项目组件

3.1 公共头部

html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公共头部</title>
    <link rel="stylesheet" href="public_header.css">
    <link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<nav class=public-header>
    <a href="">网站首页</a>
    <a href="">专题</a>
    <a href="">网站导航</a>
    <a href="">二手商品</a>
    <a href="">讨论区</a>
    <span>
        <a href=""><i class="iconfont icon-huiyuan2"></i>登陆</a>
        <a href="">免费注册</a>
    </span>
</nav>
</body>
</html>

css代码：

@import "public_reset.css";
.public-header {
    width: 1200px;
    height: 50px;
    display: flex;
    flex-wrap: nowrap;
    background-color: black;
    align-items: center;
    /*justify-content: space-evenly;*/
}
.public-header a {
    color: white;
    font-size: 15px;
}
.public-header a:first-of-type {
    margin-left: 30px;
}
.public-header > a {
    margin: auto 15px;
}
.public-header > span {
    display: flex;
    margin-left: 560px;
}
.public-header > span a {
    margin: auto 10px;
}
.public-header > span .iconfont {
    margin: auto 10px;
}

html代码：

3.2 公共尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>公共尾部</title>
    <link rel="stylesheet" href="public_footer.css">
</head>
<body>
<footer class="public-header">
    <div>
        <a href="">简介</a>
        <a href="">联系我们</a>
        <a href="">招聘信息</a>
        <a href="">友情链接</a>
        <a href="">用户服务协议</a>
        <a href="">隐私权声明</a>
        <a href="">法律投诉声明</a>
    </div>
    <div><span>LOGO</span></div>
    <div>
        <p>2019 fengniao.com. All rights reserved . 安徽闹着玩有限公司（无聊网）版权所有</p>
        <p>皖ICP证150110号 京ICP备14323013号-2 皖公网安备110108024357788号</p>
        <p>违法和不良信息举报电话: 0551-1234567 举报邮箱: admin@baidu.com</p>
    </div>
    <div>
        <p>关注公众号</p>
        <img src="erwei-code.png" alt="">
    </div>
</footer>
</body>
</html>

css代码：

@import "public_reset.css";
footer {
    height: 250px;
    background-color: black;
    color: white;
    display: grid;
    grid-template-columns: 130px 650px 300px;
    grid-template-rows: 30px 180px;
    align-content: center;
}
footer div:first-of-type {
    grid-column: 1 / span 2 ;
    grid-row: 1 / span 1;
    margin: auto 10px;
}
footer div:first-of-type > a {
    margin: auto 12px;
    color: white;
}
footer div:first-of-type > a:first-of-type {
    margin-left: 140px;
}
footer div:nth-of-type(2) {
    grid-column: 1 / span 1 ;
    grid-row: 2 / span 1;
    font-size: 35px;
    margin: 50px 120px;
}
footer div:nth-of-type(3) {
    grid-column: 2 / span 1 ;
    grid-row: 2 / span 1;
    margin-left: 160px;
}
footer div:nth-of-type(3) > p {
    margin: 22px auto;
}
footer div:last-of-type {
    grid-column: 3 / span 1 ;
    grid-row: 1 / span 2;
    margin-left: 30px;
}