11·灵魂前端工程师养成-CSS最强大的布局Grid
2023-06-13 09:11:06 时间
-曾老湿, 江湖人称曾老大。
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
Grid介绍
在Grid中,也分container
和item
成为container |
---|
语法:
.container{
display: grid | inline-grid;
}
.container{
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}

按行和列分 |
---|

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.container{
display: grid;
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 60px 300px 100px;
border: 1px solid red;
}
.a,.b,.c{
border: 1px solid black;
}
.a{
/*1 和 4 指的是第1根和第4根线(横着 看)*/
grid-row-start: 1;
grid-row-end: 2;
/*1 和 3 指的是第1根和第4根线(竖着 看)*/
grid-column-start: 1;
grid-column-end: 6;
}
.b{
grid-column-start: 1;
grid-column-end: 3;
}
.c{
grid-row-start: 2;
grid-row-end: 3;
grid-column-start: 3;
grid-column-end: 4;
}

按份份free space |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
width: 800;
}
.container>div{
border: 1px solid black;
}
.e{
grid-column-start: 2;
grid-column-end: 4;
background: #333;
}
.image{
width: 191px;
height: 191px;
background: grey;
}

gap空隙不需要负margin |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
border: 1px solid red;
width: 800px;
grid-gap: 12px;
}
.container>div{
border: 1px solid black;
}
.e{
grid-column-start: 2;
grid-column-end: 4;
background: #333;
}
.image{
width: 191px;
height: 191px;
background: grey;
}

grid-template-areas |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">ad</div>
<footer>footer</footer>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.container{
min-height: 100vh;
display: grid;
grid-template-rows: 60px auto 60px;
grid-template-columns: 100px auto 100px;
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer"
}
.container>*{
border: 1px solid red;
}
.container>header{
grid-area: header;
}
.container>aside{
grid-area: aside;
}
.container>main{
grid-area: main;
}
.container>.ad{
grid-area: ad;
}
.container>footer{
grid-area: footer;
}

横向空隙,纵向空隙 |
---|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<header>header</header>
<aside>aside</aside>
<main>main</main>
<div class="ad">ad</div>
<footer>footer</footer>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.container{
min-height: 100vh;
display: grid;
grid-template-rows: 60px auto 60px;
grid-template-columns: 100px auto 100px;
grid-column-gap: 10px;
grid-row-gap: 10px;
grid-template-areas:
"header header header"
"aside main ad"
"footer footer footer"
}
.container>*{
border: 1px solid red;
}
.container>header{
grid-area: header;
}
.container>aside{
grid-area: aside;
}
.container>main{
grid-area: main;
}
.container>.ad{
grid-area: ad;
}
.container>footer{
grid-area: footer;
}

利用grid模仿淘宝生活家布局


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="demo">
<div class="image bigImage"></div>
<div class="image bigImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image smallImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
<div class="image middleImage"></div>
</div>
</body>
</html>
*{margin:0;padding:0;box-sizing: border-box;}
.demo{
display: inline-grid;
grid-template-rows: 240px repeat(4,120px);
grid-template-columns: 250px 250px;
border: 1px solid red;
grid-template-areas:
"big mid1"
"big mid2"
"sm1 mid2"
"sm2 mid3"
"sm3 mid3";
}
.demo>.image:first-child{
grid-area: big;
border: 1px solid black;
}
.demo>.image:nth-child(2){
grid-area: sm1;
border: 1px solid black;
}
.demo>.image:nth-child(3){
grid-area: sm2;
border: 1px solid black;
}
.demo>.image:nth-child(4){
grid-area: sm3;
border: 1px solid black;
}
.demo>.image:nth-child(5){
grid-area: mid1;
border: 1px solid black;
}
.demo>.image:nth-child(6){
grid-area: mid2;
border: 1px solid black;
}
.demo>.image:nth-child(7){
grid-area: mid3;
border: 1px solid black;
}
Grid小游戏
游戏链接:传送门

之前是玩青蛙,现在给萝卜浇水



相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 03·灵魂前端工程师养成-git本地仓库
- 16·灵魂前端工程师养成-JavaScript内存图
- 30·灵魂前端工程师养成-jQuery中的设计模式
- 25·灵魂前端工程师养成-JavaScript运算符
- 40·灵魂前端工程师养成-前端框架webpack
- 36·灵魂前端工程师养成-[前后分离]AJAX实战Cookie、Session
- 连BFC都不知道谈什么前端工程师
- 前端工程师彻底征服树结构组件的秘籍
- 如何成为 10 倍工程师
- 测试工程师学习路线图
- 05·灵魂前端工程师养成-HTML入门
- 32·灵魂前端工程师养成-[前后分离]AJAX原理及JSON详解
- 前端工程师leetcode算法面试必备-二分搜索算法(下)
- 前端工程师的20道react面试题自检
- 马斯克开会当场解雇Twitter首席工程师:我有1亿多粉丝,他却说公众对我失去兴趣
- 测试工程师面试技巧, Get了吗?
- 前端工程师leetcode算法面试之二分搜索算法(下)
- 前端工程师leetcode算法面试必备---二分搜索算法(下)
- 网络工程师经常搞混的路由策略和策略路由,两者到底有啥区别?
- Linux驱动工程师求职指南:面试锦囊(linux驱动工程师面试)
- 【发挥创造力,成就嵌入式linux工程师】(嵌入式linux工程师)
- 英国航空大规模网络瘫痪事故竟然是工程师误拔数据中心电源
- 《30天打造安全工程师》第11天:MySQL简单介绍