Web前端笔记（10）Grid布局

Grid网格布局：

Grid布局是一个二维布局方法，横纵两个方向总是同时存在。与flex布局的语法类似，Grid布局涉及到的语法也分为两类，一类是作用在Grid容器上的，另一类是作用在grid子项上的：

a. 作用在Grid容器上的语法：

1. grid-template-column:

2. grid-template-row:

1.2主要是对网格进行划分，形成二维布局，单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位），网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 400px;height: 400px;border: 1px solid black;display: grid;/*grid-template-rows: 50% 50%;*//*grid-template-columns: 25% 25% 25% auto;    !*某一列自适应*!*//*也可以用fr作为单位*/grid-template-rows: 1fr 1fr;grid-template-columns: repeat(4, 1fr);  /*也可以使用repeat简写*/}#box div{background: red;border: 1px solid black;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div>
</body>
</html>

效果如下所示：

3. grid-template-area: 给网格划分区域，此时grid子项只要使用grid-area属性指定其隶属于那个区

4. grid-template: 是rid-template-row，grid-template-column，grid-template-area属性的缩写：

例如要对上面的九宫格区域进行划分，使得某几个子项成为一个区域：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;display: grid;grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/grid-template-areas:                    /*分区*/"A1 A1 A1""A2 A2 A3""A2 A2 A3";}#box div{background: red;border: 1px solid black;}#box div:nth-child(1){grid-area: A1;}#box div:nth-child(2){grid-area: A2;}#box div:nth-child(3){grid-area: A3;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

划分效果如下所示：

5. grid-column-gap:

6. grid-row-gap:

7. grid-gap:

grid-column-gap， grid-row-gap用来定义网格中网格间隙的尺寸，grid-gap:是他们的缩写：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;display: grid;grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/grid-template-areas:                    /*分区*/"A1 A1 A1""A2 A2 A3""A2 A2 A3";grid-column-gap: 10px;grid-row-gap: 5px;}#box div{background: red;border: 1px solid black;}#box div:nth-child(1){grid-area: A1;}#box div:nth-child(2){grid-area: A2;}#box div:nth-child(3){grid-area: A3;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

效果如下所示：

8. justify-items: 指定网格元素的水平呈现方式，是水平拉升显示还是左中右对齐显示：（stretch, start,end center）

9. align-items: 指定网格元素的垂直呈现方式，是垂直拉升显示还是上中下对齐显示：

10. place-items：可以让justify-items，align-items属性写在单个声明中，上述两个的简写（纵横方向）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;border: 1px solid black;display: grid;grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);  /*也可以使用repeat简写*/justify-items: center;align-items: center;}#box div{background: red;border: 1px solid black;width: 50%;height: 50%;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

效果如下所示：

11. justify-content：指定网格元素的水平分布方式

12. align-content：指定网格元素的垂直分布方式

13. place-content：上述两个元素的简写

这个是只有在容器偏大的时候才会有作用：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 500px;height: 500px;border: 1px solid black;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/justify-content: space-around;align-content: space-evenly;}#box div{background: red;border: 1px solid black;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

效果如下所示：

items与content中的区别是：

items是针对300x300的九宫格，每个大小是100x100, 在每个100x100的格子里，控制里面元素的呈现位置：

content针对的500x500的九宫格，每个大小是100x100, 控制9个100x100的格子在500x500的大容器中的表现方式：

b. 作用在Grid子项上的语法：

1. grid-column-start: 水平方向上所占据的起始位置

2. grid-column-end: 水平方向上所占据的结束位置

3. grid-row-start：垂直方向上所占据的起始位置

4. grid-row-end：垂直方向上所占据的结束位置

5. grid-column：grid-column-start，grid-column-end的复合写法

6. grid-row: grid-row-start， grid-row-end的复合写法

7. grid-area：表示当前网格所占用的区域，名字和位置两种表示方法，相当于上述的复合写法：（值用/隔开）

表示子项所占的区域的大小，行列的起始位置，例如，行的第一条线依次向下编号，列的第一条线从左到右依次编号

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/border: 1px black solid;}#box div{grid-column-start: 2;grid-column-end: 3;grid-row-start: 2;grid-row-end: 4;background: red;border: 1px solid black;}</style>
</head>
<body><div id="box"><div>1</div></div>
</body>
</html>

效果如下所示：

8. justify-self：单个网格元素水平对齐方式

9. align-self：单个网格元素垂直对齐方式

10. place-self：justify-self， align-self的缩写

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box{width: 300px;height: 300px;display: grid;grid-template-rows: repeat(3, 100px);grid-template-columns: repeat(3, 100px);  /*也可以使用repeat简写*/border: 1px black solid;}#box div{background: red;border: 1px solid black;}#box div:nth-child(5){justify-self: left;align-self: flex-end;}</style>
</head>
<body><div id="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div>
</body>
</html>

效果如下所示：

Grid布局案例：

利用grid布局实现骰子效果：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container{width: 800px;display: grid;grid-template-rows: repeat(1, 1fr);grid-template-columns: repeat(6, 1fr);border: 1px solid gray;justify-items: center;}#box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(1, 1fr);grid-template-rows: repeat(1, 1fr);justify-items: center;align-items: center;}#box1 div{width: 40%;height: 40%;border-radius: 50%;background: black;}#box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);justify-items: center;align-items: center;}#box2 div{width: 60%;height: 60%;background: black;border-radius: 50%;}#box2 div:last-child{width: 60%;height: 60%;background: black;border-radius: 50%;grid-column: 2 / 3;grid-row: 2 / 3;}#box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);justify-items: center;align-items: center;}#box3 div{width: 80%;height: 80%;background: black;border-radius: 50%;}#box3 div:nth-child(2){grid-column: 2 / 3;grid-row: 2 / 3;}#box3 div:nth-child(3){grid-column: 3 / 4;grid-row: 3 / 4;}#box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(2, 1fr);grid-template-rows: repeat(2, 1fr);justify-items: center;align-items: center;}#box4 div{width: 55%;height: 55%;background: black;border-radius: 50%;}#box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);justify-items: center;align-items: center;}#box5 div{width: 75%;height: 75%;background: black;border-radius: 50%;}/*注： 在方格中，如果中间的点被移到其它地方去，空出来的位置后面的点会自动填补上来*/#box5 div:nth-child(5)     {/*background: red;*/grid-column: 3 / 4;grid-row: 3 / 4;}#box5 div:nth-child(4){grid-column: 1 / 2;grid-row: 3 / 4;}#box5 div:nth-child(3){grid-column: 2 / 3;grid-row: 2 / 3;}#box5 div:nth-child(2){grid-column: 3 / 4;grid-row: 1 / 2;}#box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(2, 1fr);justify-items: center;align-items: center;}#box6 div{width: 75%;height: 55%;background: black;border-radius: 50%;}</style>
</head>
<body><div class="container"><div id="box1"><div></div></div><div id="box2"><div></div><div></div></div><div id="box3"><div></div><div></div><div></div></div><div id="box4"><div></div><div></div><div></div><div></div></div><div id="box5"><div></div><div></div><div></div><div></div><div></div></div><div id="box6"><div></div><div></div><div></div><div></div><div></div><div></div></div></div>
</body>
</html>

效果如下所示：

Web前端笔记（10）Grid布局相关推荐

前端笔记：Grid布局
文章目录目的基础说明容器的属性网格设置 grid-template-columns 和 grid-template-rows grid-auto-columns 和 grid-auto-row ...
Web前端笔记（21-45）
Web前端笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例未加语义化标签添加语义化标签 23.表格属性 1.常见表格属 ...
Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位脱离文档流使内联支持宽高使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
web前端优化10点总结
web前端优化10点总结 tenfy 发表于2010年01月12日 11:41 阅读(5) 评论( 1) 分类: web前台开发举报实际上,我们通过前台web端的梳理和逻辑的优化(哪怕是一个 ...
web前端html+css常用布局05列表布局
web前端html+css常用布局05列表布局注意:引入jquery的jquery-2.1.4.min.js包图片从自己目录中路径. 代码: <!DOCTYPE html> <h ...
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
目录 [网格布局grid] 1.网格布局的构成 2.父容器grid container 3.生成网格容器 display:grid/inline-grid 4.构建网格 grid-template-c ...
Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
web前端开发10大战略性技术蓝图
2010年的你,如果能学会Android开发,现在的你,薪资不会低于年薪50万-- 2015年的你,如果能熟练使用react,现在的你,薪资不会低于月薪30K-- 看到这两个数据,也许有人会反驳:技术 ...
web前端笔记1-hml，css部分
这里写目录标题一.基础内容 1.网页 1.1什么是网页 1.2什么是HTML 1.3网页的形成 2.常用浏览器 2.1常用的浏览器 2.2浏览器内核 3.web标准 3.1为什么需要web标准 3. ...

Web前端笔记（10）Grid布局

Grid网格布局：

Web前端笔记（10）Grid布局相关推荐

最新文章

热门文章