Grid 布局（网格布局）实战项目

程序员文章站 2022-03-27 08:33:04

...

Grid实战项目

代码运行效果展示地址

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;
}

4、总结

相比flex，Grid布局知识点很多很细，要慢慢尝试，细细品味。

上一篇： WTF？能把Python代码写得这么优雅的都是神仙程序员吧！

下一篇： asp.net core MVC 过滤器之ActionFilter过滤器(2)

Grid 布局（网格布局）实战项目

Grid实战项目

代码运行效果展示地址

1、网格布局相册

2、12列网格布局

3、部份实战项目组件

3.1 公共头部

3.2 公共尾部

4、总结

Bootstrap 网格系统布局详解

Android 图片网格布局控件示例代码

SEO网站优化实战之究竟该如何布局网站关键词

CSS Grid 布局完全指南(图解 Grid 详细教程)

本人实战总结：想把产品卖好在营销策划和推广上我们怎样布局

巨人网络停牌重组 305亿收购Playtika项目布局AI

CSS Grid布局入门

Python Grid使用和布局详解

grid网格布局——色子布局

Android实战基础之入门视图及布局讲解

Grid 布局（网格布局）实战项目

Grid实战项目

代码运行效果展示地址

1、网格布局相册

2、12列网格布局

3、部份实战项目组件

3.1 公共头部

3.2 公共尾部

4、总结

Bootstrap 网格系统布局详解

Android 图片网格布局控件示例代码

SEO网站优化实战之究竟该如何布局网站关键词

CSS Grid 布局完全指南(图解 Grid 详细教程)

本人实战总结：想把产品卖好 在营销策划和推广上 我们怎样布局

巨人网络停牌重组 305亿收购Playtika项目布局AI

CSS Grid布局入门

Python Grid使用和布局详解

grid网格布局——色子布局

Android实战基础之入门视图及布局讲解

本人实战总结：想把产品卖好在营销策划和推广上我们怎样布局