Grid网格布局
Grid布局是一个二维布局方法,纵横两个方向总是同时存在。
作用在grid容器上 | 作用在grid子项上 |
---|---|
grid-template-columns | grid-column-start |
grid-template-rows | grid-column-end |
grid-template-areas | grid-rows-start |
grid-template | grid-row-end |
grid-column-gap | grid-column |
grid-row-gap | grid-row |
grid-gap | grid-area |
justify-items | justify-self |
align-items | align-self |
place-items | place-self |
justify-content | |
align-content | |
place-content |
grid-template-columns和grid-template-rows
对网格进行横纵划分,形成二维布局。单位可以是像素,百分比,自适应以及fr单位(网格剩余空间比例单位)。
有时候,我们网格的划分是很规律的,如果需要添加多个横纵网格时,可以利用repeat()语法进行简化操作。
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid</title>
<style>
.box {
display: grid;
width: 300px;
height: 300px;
border: 1px dashed gray;
/* 三行四列 */
/* grid-template-rows: 100px auto 25%; */
/* grid-template-columns: 100px 100px 200px 100px; */
/* grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr; */
/* 另外的写法 */
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
.box div {
border: 1px solid red;
}
</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>8</div>
<div>9</div>
</div>
</body>
</html>
grid-template-areas和grid-template
area是区域的意思,grid-template-areas就是给我们的网格划分区域的。此时geid的子项只要使用grid-area属性指定其隶属于那个区。
grid-template就是grid-template-rows,grid-template-columns和grid-template-area属性的缩写
eg:
<!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 {
display: grid;
width: 300px;
height: 300px;
border: 1px solid gray;
/* grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
*/
/* 复合写法 */
grid-template:
"a1 a1 a1"1fr "a2 a2 a3"1fr "a2 a2 a3"1fr /1fr 1fr 1fr;
}
.box div:nth-child(1) {
grid-area: a1;
}
.box div:nth-child(2) {
grid-area: a2;
}
.box div:nth-child(3) {
grid-area: a3;
}
.box div {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
grid-column-gap和grid-row-gap
grid-column-gap和grid-row-gap属性用来定义网格间隙的尺寸。
CSS grid-grap属性是grid-column-gap和grid-row-gap属性的缩写
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格间隙</title>
<style>
.box {
display: grid;
width: 300px;
height: 300px;
border: 1px solid gray;
/* grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
"a1 a1 a1"
"a2 a2 a3"
"a2 a2 a3";
*/
/* 复合写法 */
grid-template:
"a1 a1 a1"1fr "a2 a2 a3"1fr "a2 a2 a3"1fr /1fr 1fr 1fr;
/* grid-column-gap: 10px;
grid-row-gap: 20px; */
/* 复合写法 */
grid-gap: 20px 10px;
}
.box div:nth-child(1) {
grid-area: a1;
}
.box div:nth-child(2) {
grid-area: a2;
}
.box div:nth-child(3) {
grid-area: a3;
}
.box div {
border: 1px solid red;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>
justify-items和align-items
justify-items指定了网格元素的水平呈现方式,是水平拉伸显示,还是左中右对齐。align-items指定了网格元素的垂直呈现方式,是垂直拉伸显示,还是上中下对齐
取值 | 含义 |
---|---|
stretch | 默认值,拉伸。表现为水平或垂直填充。 |
start | 表现为容器左侧对齐或顶部对齐。 |
end | 表现为容器右侧或底部对齐。 |
center | 表现为水平或垂直居中对齐。 |
ps:综合写法先写纵再写横
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>呈现方式</title>
<style>
.box {
display: grid;
width: 300px;
height: 300px;
border: 1px dashed gray;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
/* 水平方向的拉伸 默认为拉伸 不拉伸情况下内容撑开*/
justify-items: start;
/* 垂直方向的拉伸 默认为拉伸 */
align-items: start;
/* 简写 纵向 横向*/
place-items: start start;
}
.box div {
border: 1px solid red;
}
</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>8</div>
<div>9</div>
</div>
</body>
</html>
ps:子项没给高度所以内容撑开。
justify-content 和align-content
justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。
取值 | 含义 |
---|---|
stretch | 默认值,拉伸。 |
start | 表现为容器左侧或顶部对齐。 |
end | 表现为容器右侧或底部对齐。 |
center | 表现为水平或垂直居中对齐。 |
space-between | 表现为两端对齐。 |
space-around | 享有独立不重叠的空白空间。 |
space-evenly | 平均分配空白空间。 |
ps:综合写法:先纵再横
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分布方式</title>
<style>
.box {
display: grid;
width: 500px;
height: 500px;
border: 1px dashed gray;
grid-template-rows: repeat(3, 100px);
grid-template-columns: repeat(3, 100px);
/* 水平分布 */
/* justify-content: start; */
/* justify-content: space-between; */
/* 垂直分布 */
/* align-content: space-between; */
/* 简写 纵 横*/
/* place-content: space-between center; */
/* place-content: space-around space-around; */
place-content: space-evenly space-evenly;
}
.box div {
border: 1px solid red;
}
</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>8</div>
<div>9</div>
</div>
</body>
</html>
作用在grid子项上的css属性
取值 | 含义 |
---|---|
grid-colunb-start | 水平方向上占据的起始位置。 |
grid-column-end | 水平方向上占据的结束位置。(span属性) |
grid-row-start | 垂直方向上占据的起始位置。 |
grid-row-end | 垂直方向上占据的结束位置。(span属性) |
grid-column | grid-column-start+grid-end的缩写。 |
grid-row | grid-row-start+grid-row-end的缩写。 |
grid-area | 表示当前网格所占的区域,名字和位置两种表示方法。 |
justify-self | 单个网格元素的水平对齐方式 |
align-self | 单个网格的垂直对齐方式 |
place-self | align-self和justify-self的缩写。 |
- 骰子点数案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>骰子的点数</title>
<style>
.box,
.box2,
.box3,
.box4,
.box5,
.box6 {
/* 网格布局 */
display: grid;
/* 布局为三行三列 */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
/* 让网格元素居中 */
place-items: center center;
/* 给网格区域取个名称 */
grid-template-areas:
"a1 a2 a3"
"a4 a5 a6"
"a7 a8 a9"
;
width: 100px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
float: left;
margin-left: 5px;
}
.box div,
.box2 div,
.box3 div,
.box4 div,
.box5 div,
.box6 div {
width: 20px;
height: 20px;
background-color: black;
border-radius: 50%;
}
.box div:nth-child(1),
.box3 div:nth-child(2) {
grid-area: 2/2/3/3;
}
.box2 div:nth-child(2),
.box3 div:nth-child(3) {
grid-area: 3/3/4/4;
}
.box4 div:nth-child(2) {
grid-area: a3;
}
.box4 div:nth-child(3) {
grid-area: a9;
}
.box4 div:nth-child(4) {
grid-area: a7;
}
.box5 div:nth-child(2) {
grid-area: a3;
}
.box5 div:nth-child(3) {
grid-area: a9;
}
.box5 div:nth-child(4) {
grid-area: a7;
}
.box5 div:nth-child(5) {
grid-area: a5;
}
.box6 div:nth-child(2) {
grid-area: a3;
}
.box6 div:nth-child(3) {
grid-area: a9;
}
.box6 div:nth-child(4) {
grid-area: a7;
}
.box6 div:nth-child(5) {
grid-area: a4;
}
.box6 div:nth-child(6) {
grid-area: a6;
}
</style>
</head>
<body>
<div class="box">
<div></div>
</div>
<div class="box2">
<div></div>
<div></div>
</div>
<div class="box3">
<div></div>
<div></div>
<div></div>
</div>
<div class="box4">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box5">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box6">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
- 百度搜索风云榜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度搜索风云榜</title>
<style>
.box {
/* 网格布局 */
display: grid;
width: 280px;
height: 352px;
margin: 100px auto;
/* 四行三列 */
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
"a1 a2 a2 "
"a3 a2 a2 "
"a4 a4 a5 "
"a6 a7 a7"
;
/* 间距 */
grid-gap: 6px 6px;
}
.box div {
border: 1px solid red;
}
.box div:nth-child(1) {
grid-area: a1;
}
.box div:nth-child(2) {
grid-area: a2
}
.box div:nth-child(3) {
grid-area: a3;
}
.box div:nth-child(4) {
grid-area: a4;
}
.box div:nth-child(5) {
grid-area: a5;
}
.box div:nth-child(6) {
grid-area: a6;
}
.box div:nth-child(7) {
grid-area: a7;
}
</style>
</head>
<body>
<div class="box">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>