记录grid完成简单的经典12栅格布局，并完成经典的圣杯布局效果，同时完成一个典型的图片列表展示。
建立布局组件
建立12列栅格布局组件的好处就是，只要你想布局，可以随时利用里面的小组件，按照你自己的想法来实现布局。
基础HTML代码
代码语言：javascript复制 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代码：
代码语言：javascript复制/* 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代码
代码语言：javascript复制 (圣杯布局)用12列的栅格布局组件来完成一个3列布局
页眉12列
左侧2列
内容区8列
右侧2列
页脚12列
...grid-case.css代码
代码语言：javascript复制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代码：
代码语言：javascript复制/* 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代码
代码语言：javascript复制 仿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代码：
代码语言：javascript复制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;
}
...
