11·灵魂前端工程师养成-CSS最强大的布局Grid

Grid介绍
利用grid模仿淘宝生活家布局
Grid小游戏

-曾老湿, 江湖人称曾老大。

-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。

Grid介绍

在Grid中，也分container和item

成为container

语法：

代码语言：javascript复制

.container{
  display: grid | inline-grid;
}

代码语言：javascript复制

.container{
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

按行和列分

代码语言：javascript复制

<!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>

代码语言：javascript复制

*{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

代码语言：javascript复制

<!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>

代码语言：javascript复制

*{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

代码语言：javascript复制

<!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>

代码语言：javascript复制

*{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

代码语言：javascript复制

<!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>

代码语言：javascript复制

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

横向空隙，纵向空隙

代码语言：javascript复制

<!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>

代码语言：javascript复制

*{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模仿淘宝生活家布局

代码语言：javascript复制

<!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>

代码语言：javascript复制

*{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小游戏

游戏链接：传送门

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

运维自动化网站

0 人点赞