grid之经典12列栅格布局组件,经典示例-圣杯布局
记录grid完成简单的经典12栅格布局，并完成经典的圣杯布局效果，同时完成一个典型的图片列表展示。
建立布局组件
建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。
基础HTML代码
12列栅格布局
.box {
width: 90%;
outline: 1px solid;
padding: 5px;
margin: 0 auto;
}
.box .row {
height: 50px;
margin: 5px;
}
.box .row>* {
outline: 1px solid;
border-radius: 5px;
background-color: lightcyan;
text-align: center;
line-height: 50px;
font-weight: bolder;
}
6
6
3
9
2
8
2
...grid-layout.css代码：
/* 12列栅格布局组件 */
/* grid 容器 */
.row {
/* 定义这行是gird容器,并且分成12列 */
display: grid;
/* 用repeat函数块数分列 */
grid-template-columns: repeat(12, 1fr);
gap: 5px;
}
/* 设置项目 列数合并从1到12列 */
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.col-4 {
grid-column: span 4;
}
.col-5 {
grid-column: span 5;
}
.col-6 {
/* 从当前开始跨越6列 */
grid-column: span 6;
}
.col-7 {
grid-column: span 7;
}
.col-8 {
grid-column: span 8;
}
.col-9 {
grid-column: span 9;
}
.col-10 {
grid-column: span 10;
}
.col-11 {
grid-column: span 11;
}
.col-12 {
grid-column: span 12;
}...圣杯布局
如果使用传统flex方式或者定位来做这个布局的话，非常的麻烦，而使用grid不到10行代码就可以把这个布局给写出来。利用上面写好的组件，即可完成经典的圣杯布局。
基础html代码
(圣杯布局)用12列的栅格布局组件来完成一个3列布局
页眉12列
左侧2列
内容区8列
右侧2列
页脚12列
...grid-case.css代码
body {
width: 1000px;
margin: 0 auto;
/* border: 1px solid #000; */
}
.main {
margin: 5px 0;
}
.header,
.footer {
height: 50px;
background-color: lightblue;
}
.main>* {
/* border: 1px solid #000; */
background-color: lightgreen;
min-height: 700px;
}
.main .left,
.main .right {
min-width: 150px;
}
.main .content {
min-width: 500px;
}...grid-layout.css代码：
/* 12列栅格布局组件 */
/* grid 容器 */
.row {
/* 定义这行是gird容器,并且分成12列 */
display: grid;
/* 用repeat函数块数分列 */
grid-template-columns: repeat(12, 1fr);
gap: 5px;
}
/* 设置项目 列数合并从1到12列 */
.col-1 {
grid-column: span 1;
}
.col-2 {
grid-column: span 2;
}
.col-3 {
grid-column: span 3;
}
.col-4 {
grid-column: span 4;
}
.col-5 {
grid-column: span 5;
}
.col-6 {
/* 从当前开始跨越6列 */
grid-column: span 6;
}
.col-7 {
grid-column: span 7;
}
.col-8 {
grid-column: span 8;
}
.col-9 {
grid-column: span 9;
}
.col-10 {
grid-column: span 10;
}
.col-11 {
grid-column: span 11;
}
.col-12 {
grid-column: span 12;
}...基础html代码
仿php.cn最新课程
最新课程
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
中级
php编程从入门到精通(2023最新版)
12345次学习
收藏
...phpcn-course.css代码：
body {
background-color: #efefef;
}
body a {
text-decoration: none;
color: #555;
font-size: small;
}
body a:hover {
color: red;
}
.latest-courses {
width: 1020px;
/* border: 1px solid #000; */
margin: 0 auto;
}
/* 课程列表: grid, 2行5列 */
.latest-courses .courses-list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px 10px;
}
.latest-courses .courses-list img {
width: 100%;
/* 上 右 下 左 */
border-radius: 5px 5px 0 0;
}
/* 图片鼠标放上去放大一点点 */
.latest-courses .courses-list img:hover {
/* 变换: 放大 */
transform: scale(1.1);
transition: 0.3s;
}
.latest-courses .courses-list .course {
background-color: #fff;
border-radius: 5px;
/* 给课程加上溢出隐藏,这样的图片放大时,宽高不变化 */
overflow: hidden;
}
/* 课程描述 */
.latest-courses .courses-list .course .desc {
padding: 15px;
display: grid;
gap: 10px;
}
.latest-courses .courses-list .course .desc .tag {
color: red;
background-color: bisque;
border-radius: 2px;
padding: 2px 4px;
font-size: x-small;
}
.latest-courses .courses-list .course .desc .other {
color: #aaa;
font-size: small;
display: flex;
place-content: space-between;
}
...本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2023年08月01日，如有侵权请联系 cloudcommunity@tencent.com 删除
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号