grid的布局的使用
0.flex布局痛点
![](https://img-blog.csdnimg.cn/img_convert/6949febceb521643a20cb0c4485245ef.png)
- 当我使用到flex的 属性:
justify-content
属性中space-between;
space-around
space-evenly
属性值来处理空白区域的分布,最后一行可能会出现间隔过大的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 50px auto;
display: flex;
flex-wrap: wrap;
width: 600px;
height: 300px;
border: 5px solid #3333;
justify-content: space-evenly;
}
.box div {
width: 100px;
height: 100px;
background-color: #f509f1;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
</div>
</body>
</html>
1.gird是什么?
CSS 网格布局(Grid Layout) 是 CSS 中最强大的布局系统。 这是一个二维系统,这意味着它可以同时处理列和行。
**gird(网格)**布局与 Flex 弹性布局有相似之处理,都是由父容器包含多个项目元素的使用。
2.兼容性
下面是网格系统兼容性数据,你也可以在 https://caniuse.com/网站查看,所以在根据项目使用的场景决定是否使用网格布局。
在2024的今天现在浏览器版本基本都是100以上 ,大可放心去使用 但是如果你的客户还在使用用IE就尝试其他布局方式吧, 虽然IE已经没了,不排除其他用户还在使用
![](https://img-blog.csdnimg.cn/img_convert/e2cb2f969302050ad1cd8a3c9a59583f.png)
3.声明容器
1.块级容器
![](https://img-blog.csdnimg.cn/img_convert/22c4543339bfa76a6736404551b7c451.png)
- display: grid;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
display: grid;
box-sizing: border-box;
padding: 10px;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<span>xxxxxx</span>
<span class="box"></div>
</body>
</html>
2.行级容器
![](https://img-blog.csdnimg.cn/img_convert/892b97df708d0840798b71494f873725.png)
- display: inline-grid;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
margin: 50px;
}
.box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
display: inline-grid;
box-sizing: border-box;
padding: 10px;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<span>xxxxxx</span>
<span class="box"></div>
</body>
</html>
4.划分行列
- 网格有点类似表格,也
行
和列
。使用grid-template-columns
规则可划分列数,使用grid-template-rows
划分行数。
1.固定宽度
![](https://img-blog.csdnimg.cn/img_convert/1d7476e986c32719f55b90dc4af96057.png)
- 我们划分了
3列
3行
元素
<style>
.box {
margin: 50px auto;
display: grid;
grid-template-columns: 100px 100px 100px; // 3列
grid-template-rows: 50px 50px 50px; // 3行
width: 300px;
height: 300px;
border: 5px solid #3333;
}
.box div {
padding: 20px;
background-clip: content-box;
background-color:blueviolet;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
2.百分比
- 可以使用使用百分比自动适就容器。
![](https://img-blog.csdnimg.cn/img_convert/ffb98dbda4f3145ea9da7ae52cefc0e6.png)
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%; // 三列
grid-template-rows: 50% 50%; // 两行
3.重复设置
- 使用
repeat
统一设置值,第一个参数为重复数量,第二个参数是重复值
![](https://img-blog.csdnimg.cn/img_convert/e6f88a937e10478529f7f5b11298394c.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 50px auto;
display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 50%);
width: 300px;
height: 200px;
border: 5px solid #3333;
}
.box div {
padding: 20px;
background-clip: content-box;
background-color: #f509f1;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>
- 可以设置多个值来定义重复,下面定义四列
100px 50px
重复排列。
![](https://img-blog.csdnimg.cn/img_convert/38b9f340c27482bd3cf4fc45597d59aa.png)
display: grid;
grid-template-rows: repeat(2, 50%);
grid-template-columns: repeat(2, 100px 50px);
注意:repeat
函数第一个参数是重复几次 后面的值**个数 **是他循环重复次数,如上面
grid-template-columns: repeat(2, 100px 50px);
就展示了4列 公式:重复次数 * 参数的个数=2*2 =4
4.自动填充
- 自动填充是根据容器尺寸,自动设置元素尺寸。
![](https://img-blog.csdnimg.cn/img_convert/94264b6c24a2862517c6aea59b1f1438.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
margin: 50px auto;
display: grid;
grid-template-columns: repeat(auto-fit, 100px);
grid-template-rows: repeat(auto-fit, 100px);
width: 300px;
height: 200px;
border: 5px solid #3333;
}
.box div {
padding: 20px;
background-clip: content-box;
background-color: blueviolet;
border: 1px solid #d2d0d0;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>
5.比例划分
1. 单位组合
-
使用
fr
单位设置元素在空间中所占的比例,下面按1份-2份
分成两组共四列。
width: 300px;
height: 200px;
display: grid;
grid-template-rows: 1fr 2fr;
grid-template-columns: 100px 1fr 2fr;
2.重复定义
![](https://img-blog.csdnimg.cn/img_convert/ebd380fc45e4279dbfcd8f5e0887e47f.png)
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2,1fr,2fr);
6.自动空间
- 下面为第二个网格列使用
auto
来让其获取所有剩余空间
![](https://img-blog.csdnimg.cn/img_convert/23a814b45b418fcb877e67e41d6d6710.png)
<style>
.box {
margin: 50px auto;
/* width: 300px; */
height: 200px;
display: grid;
grid-template-columns: 10vw auto 20vw;
/*grid-template-columns: 10vw 1fr 20vw;*/ 1fr其实也是一样的
border: 5px solid #3333;
}
.box div {
padding: 20px;
background-clip: content-box;
background-color: blueviolet;
color: #fff;
border: 1px solid #d2d0d0;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>auto</div>
<div>3</div>
</div>
</body>
7.组合定义
grid-tempalte
是 grid-template-rows
、grid-template-columns
、grid-template-areas
的三个属性的简写。
下面使用grid-template
实现三行三列的布局
![](https://img-blog.csdnimg.cn/img_convert/4bc5ed3e3313562711f6481ffa6cfced.png)
<style>
.box {
margin: 50px auto;
width: 300px;
height: 200px;
display: grid;
grid-template: repeat(2, 1fr) / repeat(3, 1fr);
border: 1px solid red;
}
.box div {
padding: 20px;
background-clip: content-box;
color: #fff;
border: 1px solid red;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
下面是使用 grid-template
同时声明 grid-template-rows、grid-template-columns
。
![](https://img-blog.csdnimg.cn/img_convert/244b35ed156f7a34cf3b2c13d0fff492.png)
<style>
.box {
margin: 50px auto;
width: 300px;
height: 200px;
display: grid;
grid-template: 50px 100px 50px / 150px 150px;
border: 5px solid #d0d0d0;
}
.box div {
background-clip: content-box;
background-color: blueviolet;
color: #fff;
font-size: 20px;
border: 1px solid #d0d0d0;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
-
下面是使用
grid-template
定义grid-template-areas
,有关grid-template-areas
的使用方法会在下面介绍。
<style>
.box {
margin: 50px auto;
width: 300px;
display: grid;
/* 点代表占位符 一个甚至多个 */
grid-template:
'header header .' 100px
'. main main' 200px
'footer . .' 300px;
border: 5px solid #d0d0d0;
}
.box div {
background-clip: content-box;
background-color: blueviolet;
color: #fff;
font-size: 20px;
border: 1px solid #d0d0d0;
}
div:nth-child(1) {
grid-area: header;
}
div:nth-child(2) {
grid-area: main;
}
div:nth-child(3) {
grid-area: footer;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
8.最大最小值
使用 minmax
方法可以设置取值范围,下列在行高在 最小50px ~ 最大1fr
间取值。
![](https://img-blog.csdnimg.cn/img_convert/c012426eaa715167165a8ebeb082fe17.png)
<style>
.box {
margin: 50px auto;
min-width: 150px;
height: 200px;
display: grid;
grid-template-columns: repeat(3, minmax(50px, 1fr));
grid-template-rows: repeat(2, minmax(100px, 1fr));
border: 5px solid #d0d0d0;
}
.box div {
background-clip: content-box;
background-color: blueviolet;
color: #fff;
font-size: 20px;
border: 1px solid #d0d0d0;
}
</style>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
5.间距定义
1.行间距
使用 row-gap
设置行间距。
![](https://img-blog.csdnimg.cn/img_convert/7f7286ff39938828fac387a7a2f0641c.png)
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 30px;
2.列间距
使用 column-gap
设置行间距。
3.组合定义
-
使用
gap
规则可以一次定义行、列间距,如果间距一样可以只设置一个值。- 设置行列间距为 20px 与 10px
width: 300px;
height: 200px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(3, 1fr);
gap: 20px 10px;
统一设置行列间距为 20px
![](https://img-blog.csdnimg.cn/img_convert/5d2625e06f8fdbbd08f31b60763fa5f2.png)
gap: 20px;
6.元素定位
1.元素定位属性
样式属性 | 说明 |
---|---|
grid-row-start | 行开始网格线 |
grid-row-end | 行结束网格线 |
grid-column-start | 列开始网格线 |
grid-column-end | 列结束网格线 |
上面几个样式属性可以使用以下值
属性值 | 说明 |
---|---|
Line | 网格络 |
span 数值 | 网格包含的网格数量 |
span 区域名称 | 网格包含到指定的区域名称 |
auto | 自动设置,默认为一个网格宽度和高度 |
2.根据网格线
- 通过设置具体的第几条网格线来设置区域位置,设置的数值可以是正数和负数
![](https://img-blog.csdnimg.cn/img_convert/a5a6b5b37959262aca346bfa68310a04.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-column-start: 2; // 相当于图上所画的 cloumn 2
grid-column-end: 3; // 相当于图上所画的 cloumn 3
grid-row-start: 2; // 相当于图上所画的 row 2
grid-row-end: 3; // 相当于图上所画的 row 3
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
</html>
3.根据偏移量
使用 span
可以设置包含网格的数量或包含到的区域名称。
示例 | 说明 |
---|---|
grid-row-end:2 | 向下包含 2 行 |
grid-row-start:2 | 向上包含 2 行 |
grid-column-end:2 | 向右包含 2 行 |
grid-column-start:2 | 向左包含 2 行 |
![](https://img-blog.csdnimg.cn/img_convert/f5e001ebe71c21fad8490be9e17697f2.png)
最终占满4个格子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-column-start: 1;
grid-column-end: span 2;
grid-row-start: 1;
grid-row-end: span 2;
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
</html>
4.根据网格命名
在第7小节 网格命名中独立命名查看
5.根据自动命名
在第7小节 网格命名中自动命名查看
6.简写模式
可以使用 grid-row
设置行开始网格线,使用 grid-column
设置结束网格线。
上例中的垂直水平居中对齐元素,可以使用以下简写的方式声明(推荐)。
![](https://img-blog.csdnimg.cn/img_convert/4182e8339afca9b6503b9adc1559b026.png)
grid-column: 2/3;
grid-row: 2/3;
7.更加简写的模式
grid-area
更加简洁是同时对 grid-row
与 grid-column
属性的组合声明。
语法结构如下:
grid-area:grid-row-start/grid-column-start/grid-row-end/grid-column-end。
上例中的垂直水平居中对齐元素,可以使用以下简写的方式声明
grid-area:2/2/3/3
8.实现类似于bootstrap的布局
下面是 bootstrap 网格系统的开发,根据指定的样式自动设置网格大小。我把一列画成12列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.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 {
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;
}
.container {
width: 1200px;
margin: 0 auto;
}
.main {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
[class^='col-'] {
background-color: #d123f0;
border: 1px solid #e8e8e8;
padding: 10px;
box-sizing: border-box;
background-clip: content-box;
}
</style>
</head>
<body>
<div class="container main">
<div class="col-2">1</div>
<div class="col-1">2</div>
<div class="col-8">3</div>
</div>
</body>
</html>
7.网格命名
网格线可以使用命名与编号找到,方便控制指定网格,或将内容添加到指定网格中。
![](https://img-blog.csdnimg.cn/img_convert/e58525afbdba576dce4ce3eb5f6bae47.png)
1.独立命名
可以为每个网格独立命名来进行调用。我们让元素跑到中间去我创建一个3行3列的网格
![](https://img-blog.csdnimg.cn/img_convert/4182e8339afca9b6503b9adc1559b026.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end];
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-row-start: r2-start;
grid-column-start: c1-end;
grid-row-end: r2-end;
grid-column-end: c3-start;
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
</html>
2.自动命名
上面那种方式过于麻烦了,创建一个列或者行就要给名字,我们用重复函数repeat来实现
![](https://img-blog.csdnimg.cn/img_convert/4182e8339afca9b6503b9adc1559b026.png)
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
/* grid-template-columns: [c1-start] 100px [c1-end c2-start] 100px [c2-end c3-start] 100px [c3-end];
grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end r3-start] 100px [r3-end]; */
grid-template-columns: repeat(3, [c-start] 100px [c-end]);
grid-template-rows: repeat(3, [r-start] 100px [r-end]);
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-row-start: r-start 2;
grid-column-start: c-start 2;
grid-row-end: r-start 2;
grid-column-end: c-end 2;
color: white;
}
</style>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
8.区域定位
其实在第6小节的元素定位提到过,在这里我们在这里详细在讲讲,通过 grid-area
属性可以将元素放在指定区域中。grid-area
由grid-row-start
、grid-column-start
、grid-row-end
、grid-column-end
的简写模式。
1.编号定位
下例中将元素放在容器的中心位置中的网格中
![](https://img-blog.csdnimg.cn/img_convert/4182e8339afca9b6503b9adc1559b026.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(3,100px);
grid-template-rows:repeat(3,100px);
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-area:2/2/3/3
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
</html>
2.命名定位
同样是上面的例子可以使用网格线命名来附加元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.header {
margin: 50px;
display: grid;
width: 300px;
height: 300px;
grid-template-columns: repeat(auto-fill, [c] 100px);
grid-template-rows: repeat(auto-fill, [r] 100px);
border: 5px solid #cfcfce;
}
.header .div1 {
background-color: blueviolet;
grid-area: r 2 / c 2 / r 3 / c 3;
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="div1">1</div>
</div>
</body>
</html>
9.区域声明
区域是由多个单元格构成,使用 grid-template-areas
可以定义网格区域,并且网格区域必须是矩形的。
1.区域布局
下面是使用栅格区域布局移动端页面结构
![](https://img-blog.csdnimg.cn/img_convert/7ab8e0a8b41fab749269b5c73c8ccb61.png)
<style>
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 100px 1fr 50px 60px;
grid-template-areas: "header header header header"
"nav main main aside"
"footer footer footer footer";
}
main {
/* 完整的写法,推荐使用下面的简写方式*/
/* grid-area: main-start/main-start/main-end/main-end; */
/*推荐使用下面的简写方式*/
grid-area: main;
background: #E9EEEF;
}
header {
background: #2EC56C;
grid-area: header;
}
nav {
background: #E1732C;
grid-area: nav;
}
aside {
grid-area: aside;
background: #EEBC31;
}
footer {
grid-area: footer;
background: #904FA9;
}
</style>
<body>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</body>
2.简写形式
使用 grid-template 进行栅格划分会更简洁。
语法格式为:
grid-template:
'栅格名称 栅格名称 栅格名称 栅格名称' 行高
'栅格名称 栅格名称 栅格名称 栅格名称' 行高
'栅格名称 栅格名称 栅格名称 栅格名称' 行高/列宽 列宽 列宽 列宽;
![](https://img-blog.csdnimg.cn/img_convert/dd79421520a3cf37ef683cb69686eac3.png)
下面是使用 grid-template 进行简写的示例
<style>
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template:
'header header header header' 80px
'nav main main aside' auto
'footer footer footer footer' 80px / 100px auto 60px 40px;
}
main {
/* 完整的写法,推荐使用下面的简写方式*/
/* grid-area: main-start/main-start/main-end/main-end; */
/*推荐使用下面的简写方式*/
grid-area: main;
background: #5c59f7;
}
header {
background: #2ec56c;
grid-area: header;
}
nav {
background: #e1732c;
grid-area: nav;
}
aside {
grid-area: aside;
background: #eebc31;
}
footer {
grid-area: footer;
background: #904fa9;
}
</style>
<body>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</body>
3.区域命名(系统自动命名)
系统会为区域自动命名,上例中的会产生 header-start
水平与垂直同名的起始区域与 header-end
水平与垂直同名的区域终止。
![](https://img-blog.csdnimg.cn/img_convert/970608b19dcb4656c099a1520c52f548.png)
<style>
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template:
'header1 header1'
'nav main' auto
'footer footer' 60px / 100px 1fr;
}
header {
background: #2ec56c;
grid-area: header1-start/header1-start/main-end/main-end;
}
aside {
grid-area: aside;
background: #eebc31;
}
footer {
grid-area: footer;
background: #904fa9;
}
</style>
<body>
<header></header>
<footer></footer>
</body>
4.区域占位
使用一个或多个 连续的.
定义区域占位。
![](https://img-blog.csdnimg.cn/img_convert/92e7e6b687d0977594eca0947638ba19.png)
<style>
body {
width: 100vw;
height: 100vh;
display: grid;
grid-template:
'.. header'
'.. main'
'footer footer' 60px / 100px 1fr;
}
header {
background: #2ec56c;
grid-area: header-start/header-start/main-end/main-end;
}
aside {
grid-area: aside;
background: #eebc31;
}
footer {
grid-area: footer;
background: #904fa9;
}
</style>
<body>
<header></header>
<footer></footer>
</body>
10.网格流动
在容器中设置grid-auto-flow
属性可以改变单元格排列方式。
选项 | 说明 |
---|---|
column | 按列排序 |
row | 按行排列 |
dense | 元素使用前面空余栅格(下面有示例说明) |
1.基本使用
下例将单元按列排序流动
![](https://img-blog.csdnimg.cn/img_convert/ec171cd2568f3808c2db7e74a9b831d6.png)
<style>
article {
width: 400px;
height: 400px;
display: grid;
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
border: solid 5px silver;
grid-auto-flow: column;
}
div {
background: blueviolet;
background-clip: content-box;
padding: 10px;
font-size: 35px;
color: white;
}
</style>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</article>
2.强制填充
当我们布局的时候有些空隙这个时候
![](https://img-blog.csdnimg.cn/img_convert/6872e179584b0858bf2ffae640392302.png)
<style>
article {
width: 400px;
height: 400px;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
border: solid 5px silver;
}
div {
background: blueviolet;
background-clip: content-box;
padding: 10px;
font-size: 35px;
color: white;
}
div:first-child {
grid-column: 2/4;
}
div:nth-child(2) {
grid-column: 1/3;
}
</style>
...
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</article>
当元素在栅格中放不下时,将会发生换行产生留白,使用grid-auto-flow: row dense;
可以执行填充空白区域操作。
我们可以使用 **grid-auto-flow: row dense; **
![](https://img-blog.csdnimg.cn/img_convert/3a84e76bc75e8e185a8fdc82d5deeda4.png)
article {
width: 400px;
height: 400px;
display: grid;
grid-template-rows: repeat(2, 100px);
grid-template-columns: repeat(2, 100px);
border: solid 5px silver;
grid-auto-flow: row dense;
}
11.对齐管理
可以通过属性方便的定义栅格或元素的对齐方式
选项 | 说明 | 对象 |
---|---|---|
justify-content | 所有栅格在容器中的水平对齐方式,容器有额外空间时 | 栅格容器 |
align-content | 所有栅格在容器中的垂直对齐方式,容器有额外空间时 | 栅格容器 |
align-items | 栅格内所有元素的垂直排列方式 | 栅格容器 |
justify-items | 栅格内所有元素的横向排列方式栅格内所有元素的横向排列方式 | 栅格容器栅格容器 |
align-self | 元素在栅格中垂直对齐方式 | 栅格元素 |
justify-self | 元素在栅格中水平对齐方式 | 栅格元素 |
1.网格对齐
justify-content 与 align-content 用于控制栅格的对齐方式,比如在栅格的尺寸小于容器的里面时,控制栅格的布局方式。
justify-content 属性的值如下
值 | 说明 |
---|---|
start | 容器左边 |
end | 容器右边 |
center | 容器中间 |
stretch | 撑满容器 |
space-between | 第一个栅格靠左边,最后一个栅格靠右边,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,栅格之间的间隔比栅格与容器边距的间隔大一倍 |
space-evenly | 栅格间距离完全平均分配 |
align-content 属性的值如下
值 | 说明 |
---|---|
start | 容器顶边 |
end | 容器底边 |
center | 容器垂直中间 |
stretch | 撑满容器 |
space-between | 第一个栅格靠左边,最后一个栅格靠右边,余下元素平均分配空间 |
space-around | 每个元素两侧的间隔相等。所以,栅格之间的间隔比栅格与容器边距的间隔大一倍 |
space-evenly | 栅格间距离完全平均分配 |
![](https://img-blog.csdnimg.cn/img_convert/bcc2a910c2e8df20c0443ec8f698ef44.png)
border: solid 5px silver;
width: 600px;
height: 600px;
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 200px 200px;
justify-content: space-between;
align-content: space-evenly;
下面是栅格水平与垂直居中对齐的示例
![](https://img-blog.csdnimg.cn/img_convert/91e808c7d0203f470ae437a4f5d5cd74.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
article {
display: grid;
border: 5px solid #d2d0d0;
height: 400px;
width: 400px;
grid-template-columns: repeat(4, 60px);
justify-content: center;
align-content: center;
}
article div {
border: 1px solid #d2d0d0;
padding: 10px;
background-color: blueviolet;
box-sizing: border-box;
height: 50px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</article>
</body>
</html>
2.元素对齐
justify-items 与 align-items 用于控制所有栅格内元素的对齐方式
- justify-items 用于控制元素的水平对齐方式,可用的属性值如下
值 | 说明 |
---|---|
start | 元素对齐栅格的左边 |
end | 元素对齐栅格的右边 |
center | 元素对齐栅格的中间 |
stretch | 水平撑满栅格 |
- align-items 用于控制元素的垂直对齐方式,可用的属性值如下
值 | 说明 |
---|---|
start | 元素对齐栅格的顶边 |
end | 元素对齐栅格的底边 |
center | 元素对齐栅格的垂直中间 |
stretch | 垂直撑满栅格 |
下面是将元素在所在栅格中水平、垂直居中的示例
![](https://img-blog.csdnimg.cn/img_convert/41ddeee6f4765c8c9d355eff5a0db749.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
article {
display: grid;
border: 5px solid #d2d0d0;
height: 100px;
width: 400px;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 100px;
justify-items: flex-start;
align-items: center;
}
article div {
border: 1px solid #d2d0d0;
padding: 10px;
background-color: blueviolet;
box-sizing: border-box;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<article>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</article>
</body>
</html>
3.元素独立控制
justify-self 与 align-self 控制单个栅格内元素的对齐方式,属性值与 justify-items 和 align-items 是一致的。
div:first-child {
justify-self: end;
align-self: center;
}
div:nth-child(4) {
justify-self: start;
align-self: center;
}
4.组合简写
1.place-content
用于控制栅格的对齐方式,语法如下:
place-content: <align-content> <justify-content>
2.place-items
控制所有元素的对齐方式,语法结构如下:
place-items: <align-items> <justify-items>
3.place-self
控制单个元素的对齐方式
place-self: <align-self> <justify-self>
12.自动排列
当栅格无法放置内容时,系统会自动添加栅格用于放置溢出的元素,我们需要使用以下属性控制自动添加栅格的尺寸。
1.属性说明
选项 | 说明 | 对象 |
---|---|---|
grid-auto-rows | 控制自动增加的栅格行的尺寸,grid-auto-flow:row; 为默认 | 容器 |
grid-auto-columns | 控制自动增加的栅格列的尺寸,grid-auto-flow: column; | 容器 |
2.自动栅格行
下面定义了 2X2 的栅格,但有多个元素,系统将自动创建栅格用于放置额外元素。我们使用 grid-auto-rows 来控制增加栅格的行高。
- 如果没有定义溢出的高度或宽度,盒子宽/高根据 自身内容而来
- 未设置溢出高度或宽度
![](https://img-blog.csdnimg.cn/img_convert/e56c4a02bfff06844bebf41c84809b5b.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
main {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px; // 溢出的高度就是100px
grid-auto-columns: 200px;
}
div {
background: blueviolet;
background-clip: content-box;
border: solid 1px #ddd;
color: white;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main>
</body>
</html>
-
我们将改变单元格排列方式。
-
grid-auto-flow: column;
![](https://img-blog.csdnimg.cn/img_convert/16c87f42319ad2639e0766eec7054b8b.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
main {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 100px;
grid-auto-columns: 200px;
grid-auto-flow: column;
}
div {
background: blueviolet;
background-clip: content-box;
border: solid 1px #ddd;
color: white;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</main>
</body>
</html>
3.自动行列
下面创建了 2X2 栅格,我们将第 2 个 DIV 设置的格栅已经超过了2行2列,所以系统会自动创建栅格。
第2个DIV已经是200x200了
![](https://img-blog.csdnimg.cn/img_convert/c39f7c4958d6c70d0d7fb1f5cd2059b5.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
main {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 1fr);
grid-auto-columns: 200px;
grid-auto-rows: 200px;
}
div {
background: blueviolet;
background-clip: content-box;
border: solid 1px #ddd;
color: white;
}
div:nth-child(2) {
grid-area: 3/3/4/3;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
</main>
</body>
</html>
3.自动行列
下面创建了 2X2 栅格,我们将第 2 个 DIV 设置的格栅已经超过了2行2列,所以系统会自动创建栅格。
第2个DIV已经是200x200了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
main {
display: grid;
grid-template-rows: repeat(2, 50px);
grid-template-columns: repeat(2, 1fr);
grid-auto-columns: 200px;
grid-auto-rows: 200px;
}
div {
background: blueviolet;
background-clip: content-box;
border: solid 1px #ddd;
color: white;
}
div:nth-child(2) {
grid-area: 3/3/4/3;
}
</style>
</head>
<body>
<main>
<div>1</div>
<div>2</div>
</main>
</body>
</html>