项目在grid容器中的对齐方式以及利用grid布局仿写php中文网 -

首页 > 博客列表 > 项目在grid容器中的对齐方式以及利用grid布局仿写php中文网

博主信息

博文 37

粉丝 1

访问量 41451

专题推荐

更多>

一.所有项目整体在grid容器中的对齐方式

space-content：有时候网格合计大小可能小于其网格容器大小，我们需要调整所有网格在网格容器中的整体对齐方式，space-content是justify-content(设置水平方向)和align-content(设置垂直方向)的简写方式。
每个方向可以选择以下7个值：

属性	说明
start	起始位置
end	结束位置
center	居中对齐
stretch	拉伸
space-around	在每个网格项之间放置一个均匀的空间，两端放置一半的空间
space-between	在每个网格项之间放置一个均匀的空间，两端没有空间
space-evenly	在每个网格项目之间放置一个均匀的空间，两端放置一个均匀的空间

例如我们做一个大盒子并设置为grid容器，里面放6个grid项目，使6个项目小于容器，并设置6个项目在容器中的整体对齐方式

代码如下：

    <style>
        .container{
            height: 30em;
            width:50em;
            border: 1px solid #000;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3,10em);
            grid-template-rows: repeat(2,10em);
            gap: 0.2em;
        }
        .container>.items{
            width:10em;
            height: 10em;
            background-color:skyblue;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>
</body>

经过运行后我们发现，所有项目都挤在容器中的左上角，如图：

如果我们想把所有项目在容器中平均分割空间，只需要在容器中(.container)添加代码:

place-content:space-evenly space-evenly;

我们得到了理想的结果，如图：

当然还有其它很多组合，例如：

/* 所有项目挤到容器中间 */
 place-content:center center;
/* 所有项目对齐到右下角 */
place-content:end end;
/* 分布均匀的空间，左右两端没有空间，两个值都一样可以只写一个 */
 place-content:space-between space-between;
/* 分布均匀的空间，左右两端放置一半的空间*/
place-content: space-around space-between;

二.项目在网格单元中的对齐方式

**有时候我们设置的项目比网格单元小，我们可以使用place-items进行设置，place-items是align-items 与 justify-items的缩写，一个设置垂直方向，一个是设置水平方向的对齐方式。

每个方向可以设置4个值，当第二个值与第一个值相同时,可以省第二个值，有以下四种设置方向：：

属性	说明
start	起始位置
end	结束位置
center	居中
stretch	拉伸(如果没有设置项目大小情况下，是默认值)

下面我们进行演示：
html部分：

<div class="container">
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
        <div class="items"></div>
    </div>

css部分我们把9个项目设置的故意比网格单元小

 <style>
        .container{
            border: 1px solid #000;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3,10em);
            grid-template-rows: repeat(3,10em);
            gap: 0.1em;
        }
        .container>.items{
            width:8em;
            height: 8em;
            background-color:skyblue; 
            border:1px solid #000; 
        }
    </style>

看到的效果如下图：

现在我们对place-items进行设置：

.container{
            border: 1px solid #000;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(3,10em);
            grid-template-rows: repeat(3,10em);
            gap: 0.1em;
            /* 设置项目到网格中间 */
            place-items:center;
        }

项目成功的走到了网格中间

如果我们要项目调到网格其它位置可以进行其它组合，如果两个方向的参数一样，可以只写一个参数

/*垂直居中，水平开始方向*/
 place-items: center start;

三.用space-self设置项目在单个单元格中的对齐方式

如果只设置单个项目在网格单元中的位置，只需要在css中用选择器找到这个项目使用place-self进行设置就可以了，网格单元包括：单元格, 网格区域(多个单元格组成)

例如我们要设置第6个items到所在网格的中间：

.container>.items:nth-of-type(6){
            place-self:center ;
            background-color: red;
        }

gird实战部分：

1：仿layui12栅格
思路：用css写一个container，container里面写一个row用gird设置成12列,再设置好12个分别跨1列到12列的网格单位，需要的地方引入就是了
以下是css部分：

*{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body{
            width:100vw;
            height: 100vh;
            display: grid;
            place-content: center;
        }
        .container{
            min-width:80vw;
            display: grid;
            gap: .5;
        }
        .container>.row{
            display: grid;
            grid-template-columns: repeat(12,1fr);
        }
        .container>.row>.items{
            border:1px solid #000;
            padding:1em;
            text-align: center;
        }
        .col-12{
            grid-area:auto / span 12;
        }
        .col-11{
            grid-area:auto / span 11;
        }
        .col-10{
            grid-area:auto / span 10;
        }
        .col-9{
            grid-area:auto / span 9;
        }
        .col-8{
            grid-area:auto / span 8;
        }
        .col-7{
            grid-area:auto / span 7;
        }
        .col-6{
            grid-area:auto / span 6;
        }
        .col-5{
            grid-area:auto / span 5;
        }
        .col-5{
            grid-area:auto / span 4;
        }
        .col-3{
            grid-area:auto / span 3;
        }
        .col-2{
            grid-area:auto / span 2;
        }
        .col-1{
            grid-area:auto / span 1;
        }

写好过后用html验证一下

<div class="items col-12"></div>
<div class="items col-6"></div><div class="items col-6"></div>
<div class="items col-3"></div><div class="items col-9"></div>

运行效果如下：

2:用gird快速实现php主页主要部件布局
html部分代码如下：


    <title>php中文网</title>
    <link rel="stylesheet" href="copyphp.css">
</head>
<body>
    <header>
        <a href="">php中文网</a>
        <a href="">
            <p>首页</p>
        </a>
        <a href="">
            <p>视频教程</p>
        </a>
        <a href="">
            <p>入门教程</p>
        </a>
        <a href="">
            <p>社区问答</p>
        </a>
        <a href="">
            <p>技术文章</p>
        </a>
        <a href="">
            <p>资源下载</p>
        </a>
        <a href="">
            <p>编程词典</p>
        </a>
        <a href="">
            <p>工具下载</p>
        </a>
        <a href="">
            <p>php培训</p>
        </a>
    </header>
    <main>
        <div class="nav">
            <ul class="navlift">
                <li>php开发</li>
                <li>前端开发</li>
                <li>服务端开发</li>
                <li>移动开发</li>
                <li>数据库</li>
                <li>服务器运维&下载</li>
                <li>在线工具箱</li>
                <li>常用类库</li>
            </ul>
            <ul class="navtop">
                <li>php头条</li>
                <li>独狐九贱</li>
                <li>学习路线</li>
                <li>在线工具</li>
                <li>趣味课堂</li>
                <li>社区问答</li>
                <li>课程直播</li>
                <li><input type="text" value="输入关键词搜索"></li>
            </ul>
            <div class="main_banner"><img src="phpimg/phpbanner.png" alt=""></div>
            <ul class="navbottom">
                <li><img src="phpimg/php1.jpg" alt=""> </li>
                <li><img src="phpimg/php2.jpg" alt=""></li>
                <li><img src="phpimg/php3.jpg" alt=""></li>
                <li><img src="phpimg/php4.png" alt=""></li>
            </ul>
        </div>
        <div class="rmjpk">
            <h3>&lt;\&gt;php入门精品课程&lt;\&gt;</h3>
            <ul class="class_list">
                <li>
                    <img src="phpimg/phpjpk1.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk3.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk3.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk4.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk5.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk6.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk8.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk8.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk9.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk10.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk11.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk12.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk13.jpg"></img>
                </li>
                <li>
                    <img src="phpimg/phpjpk14.jpg"></img>
                </li>
            </ul>
        </div>  
    </main>
    <footer></footer>
</body>
</html>

css部分代码如下：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #F0F2F4;
}
a{
    text-decoration: none;
    color:#B3B3B3;
}
li{
    list-style: none;
}
header{
    height: 60px;
    background-color: #000000;
    display: grid;
    grid-template-columns: repeat(11,1fr);
    place-items: center ;
}
header a:first-of-type{
    background:linear-gradient(to top, #DE3326 ,#EB605A);
    padding: .5em;
    border-radius: 48%;
    color:white;
}
main > .nav{
    margin:2em auto;
    width: 1200px;
    display: grid;
    grid-template-columns: 220px 980px;
    grid-template-rows: 60px 328px 120px;
}
main > .nav > .navlift{
    grid-area: 1 / 1 / span 3 / span 1;
    display: grid;
    grid-template-rows: repeat(8,1fr);
    place-items: center start ;
    padding-left: 2em;
    background-color: #2B333B;
    color:#AAADB0;
    border-radius: .5em 0 0 .5em;
}
main > .nav > .navtop{
    grid-area: 1 / 2 / sapn 1 / span 1;
    display: grid;
    grid-template-columns: repeat(9,1fr);
    padding-left: 1em;
    line-height: 80px;
    background-color: #FFFFFF;
    font-size: 1.1rem;
}
main > .nav > .navtop > li >input{
    grid-area: span 2;
}
main > .nav > .main_banner{
    grid-area: 2 / 2 ;
}
main > .nav > .main_banner >img{
    width:980px;
    height: 328px;
}
main > .nav > .navbottom{
    grid-area: 3 /2 ;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    place-items: center;
}
main > .nav > .navbottom img{
    border-radius:.5em;
}
main > .rmjpk{
    background-color: #fff;
    width:1200px;
    padding: 15px;
    margin:30px auto;
}
main > .rmjpk >h3{
    text-align: center;
}
main > .rmjpk > ul{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: repeat(3,1fr);
    gap: 20px;
    height: 560px;
    margin:10px auto;
}
main > .rmjpk > ul >*{
    background-color: lightcyan;
    border-radius: 10px;
}
main > .rmjpk > ul > li>img{
    width:100%;
    height: 100%;
    border-radius:20px;
}
main > .rmjpk > ul >:first-of-type{
    grid-area: span 2;
}

实现效果如下图：

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

1209:列表,表格,表单与框架

2020-12-10 16:56:35