一、什么是grid网格布局?
Grid 布局则是将容器划分成“行"和“列”,产生单元格,然后指定"项目所在”的单元格,可以看作是二维布局。
1、使用方法
设置CSS属性display:grid或display:inlne-grid来实现
grid-rows | 同时设置行和列 |
grid-template-columns | 设置列 |
grid-template-rows | 设置行 |
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 400px;
border: 10px solid red;
margin: auto;
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
可以看到在没设置网格布局时,9个div并没有将容器铺满,还有很多的剩余空间。而设置了grid后就可以让9个div铺满容器。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 400px;
border: 10px solid red;
margin: auto;
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
可以看到在设置了grid以后,9个div平均的铺满了整个容器。
同时也可以利用上面表格中所罗列的属性,对grid的网格进行行与列的分布
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 200px 200px 200px;
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
在设置中需要注意提前算好需要几行几列。
2、关于gird宽与高的设置
px,cm,mm,rem,em、px | 常见的设置单位 |
X% | 可以使用百分比设置宽高 |
fr | 总共有几个fr,就占比几分之n |
repeat(数量,行高) | 可以统一设置某一行或列的宽高 |
auto | 由浏览器自己决定长度。 |
minmax(最小值,最大值 ) | 定义一个最小宽高以及一个最大宽高。 |
min content | 表示网格的轨道长度自适应内容最小的那个单元格 |
max content | 表示网格的轨道长度自适应内容最大的那个单元格 |
一般为了方便快捷我们都使用repeat(数量,行高),只需输入一次就可以让所有的行和列都变成同一高度。
还拿上一个项目示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
在使用repeat(数量,行高)时,仅需输入一遍数值就可以达到同样的效果。
3、网格轨道和轨道之间的距离
轨道和轨道之间的距离使用的属性主要就是2个: row-gap
(行间距)和column-gap
(列间距),也可此属性进行简写为gap:行间距 列间距。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
在使用gap进行设置后,可以看到网格的每行和每列都有了一定的间距。
4、内容在容器中的位置
4.1、设置属性
justify-content:设置的是水平方向
align-content:设置的是垂直方向
4.2、项目排列属性:
start | 初始排列(默认属性) |
end | 末尾排列 |
center | 居中排列 |
space-around | 每个行和列,都均匀排列每个元素 每个元素周围分配相同的空间 |
space-between | 每个行和列,都均匀排列每个元素首个元素放置起始,末尾元素放置于末尾 |
space-evenly | 每个行和列,都均匀排列每个元素之间的间隔相等 |
stretch | 每个行和列,都均匀排列每个元素会被拉伸以适应容器的大小 |
下面我们进行示例:
4.2.1、设置end属性:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: end;
}
.item{
background-color: pink;
}
.item-1{
background-color: purple;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
4.2.2、 设置center属性:
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: center;
align-content: center;
4.2.3、设置space-around属性:
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: space-around;
align-content: space-around;
4.2.4、设置space-between属性:
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: space-between;
align-content: space-between;
4.2.5、设置space-evenly属性:
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: space-evenly;
align-content: space-evenly;
}
4.2.6设置stretch属性:
.container{
width: 1000px;
height: 800px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,150px);
grid-template-rows: repeat(3,150px);
gap: 10px 5px;
justify-content: stretch;
align-content: stretch;
}
5、响应式布局
5.1、什么是响应式布局
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
5.2响应式布局属性
可以进行响应式布局在repeat中使用auto-fit或auto-fill。
5.3、auto-fit和auto-fill的共同点:
1.就是尽可能多的创建轨道。
2.然后不足一个轨道的空间平均分配给已有的轨道。
5.4、auto-fit和auto-fill的不同同点:
auto-fit的最后一步是,折叠空轨道,将空轨道的空间全部平均分配给已有元素的轨道。
auto-fill的最后一步时保留空轨道留白,不会折叠空轨道。
注意:auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别。
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
padding: 0;
border: 0;
padding: 0;
}
.container,.container1{
height: 200px;
display: grid;
}
.container{
grid-template-columns: repeat(auto-fill,minmax(100px,1fr));
}
.container div{
border: 1px solid pink;
font-size: 80px;
}
.container1{
grid-template-columns: repeat(auto-fit,minmax(100px,1fr));
}
.container1 div{
border: 1px solid pink;
font-size: 80px;
}
</style>
<body>
<div class="container">
<!-- 选项 item -->
<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>
<div class="container1">
<!-- 选项 item -->
<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>
5、指定项目位置属性
5.1、grid-column-start 属性——列起始
grid-column-end 属性——列终点
grid-row-start 属性————行起始
grid-row-end 属性————行终点
5.2、示例:
.container{
width: 1000px;
height: 450px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px 5px;
font-size: 40px;
}
.item{
background-color: pink;
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
5.3、在使用时也有简洁方便的办法,可以使用span,来表示跨越几个单元格。
例如:
.container{
width: 1000px;
height: 450px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px 5px;
font-size: 40px;
}
.item{
background-color: pink;
grid-column-start: span 2;
grid-row-start: span 2;
}
同时也可以使用grid-area属性将这4个属性合为一个属性:
.container{
width: 1000px;
height: 450px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px 5px;
font-size: 40px;
}
.item{
background-color: pink;
grid-area:1/ 1 / 3 / 3;
}
5.4、利用grid-template-areas:属性
首先是对每一个单元格进行命名,默认情况下命名顺序和单元格顺序一致。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 450px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px 5px;
font-size: 40px;
grid-template-areas: 'a a c'
'a a f'
'g h i';
}
.item{
background-color: pink;
grid-area: a;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>
可以看到利用grid-template-areas属性也可以达到同样的效果,但需要注意的是,在使用grid-template-areas属性时每行都需要分号和引号,并且字母与字母之间要空一格。
grid-template-areas属性还有一项功能,就是可以将项目位置进行调换,例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.container{
width: 1000px;
height: 450px;
border: 10px solid red;
margin: auto;
display: grid;
grid-template-columns: repeat(3,100px);
grid-template-rows: repeat(3,100px);
gap: 10px 5px;
font-size: 40px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}
.item{
background-color: pink;
grid-area: c;
}
.item-2{
background-color: red;
}
.item-3{
background-color: rosybrown;
grid-area: a;
}
.item-4{
background-color: salmon;
}
.item-5{
background-color: slateblue;
}
.item-6{
background-color: blue;
}
.item-7{
background-color: green;
}
.item-8{
background-color: greenyellow;
}
.item-9{
background-color: grey;
}
</style>
<body>
<div class="container">
<div class="item">1</div>
<div class="item-2">2</div>
<div class="item-3">3</div>
<div class="item-4">4</div>
<div class="item-5">5</div>
<div class="item-6">6</div>
<div class="item-7">7</div>
<div class="item-8">8</div>
<div class="item-9">9</div>
</div>
</body>
</html>