基础概念
两个横向网格线之间的是行轨道
两个纵向网格线之间的是列轨道
容器触发网格
display : grid ; 存在兼容性问题
display : inline-grid ;
设置行列
跟几组值,就代表几行几列
/* grid-template-rows: 100px 100px 100px; */
片段划分:fr
grid-template-rows: 1fr 3fr 1fr;
grid-template-rows: 20% 30% 50%;
/* grid-template-columns: 100px 200px 100px; */
grid-template-columns: 1fr 1fr 1fr;
/* 取值重复函数 repeat(num1,num2) num1:重复次数 num2:重复的数值*/
grid-template-columns: repeat(5, 1fr);
/* 自动填充 用10%进行划分,划分不下来,不在划分 */
grid-template-columns: repeat(auto-fill, 10%);
网格之间的间距
/* row-gap: 20px; */
/* column-gap: 20px; */
gap: 20px 40px;
给网格添加项目
添加对应的div
调整显示顺序:
grid-auto-flow:row/colimn;
项目对齐方式
水平对齐方式:justify-items
垂直对齐方式: align-items
网格位于容器的对齐方式
justify-content:start\center\end\space-around……
align-content
项目属性
简写:grid-row:start/end;
<!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>
.father {
width: 300px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
display: grid;
grid-template-rows: repeat(4, 100px);
grid-template-columns: repeat(3, 100px);
}
.father>div {
background-color: pink;
border: 2px solid rgb(58, 57, 56);
}
.box1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 2;
grid-column-end: 4;
}
.box7 {
grid-row-start: 4;
grid-row-end: 5;
grid-row: 4/5;
grid-column-start: 1;
grid-column-end: 3;
}
</style>
</head>
<body>
<div class="father">
<div class="box1">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div class="box7">7</div>
<div>8</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>Document</title>
<style>
.box {
width: 1200px;
height: 430px;
border: 2px solid black;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(11, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
}
.box>div {
background-color: pink;
}
.box8 {
grid-row: 1/2;
grid-column: 8/10;
}
.box9 {
grid-row: 2/3;
grid-column: 1/3;
}
.box10 {
grid-row: 1/2;
grid-column: 10/12;
}
.box13 {
grid-row: 2/4;
grid-column: 5/7;
}
.box19 {
grid-row: 3/5;
grid-column: 1/3;
}
</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 class="box8">8</div>
<div class="box9">9</div>
<div class="box10">10</div>
<div>11</div>
<div>12</div>
<div class="box13">13</div>
<div>14</div>
<div>15</div>
<div>16</div>
<div>17</div>
<div>18</div>
<div class="box19">19</div>
<div>20</div>
<div>21</div>
<div>22</div>
<div>23</div>
<div>24</div>
<div>25</div>
<div>26</div>
<div>27</div>
<div>28</div>
<div>29</div>
<div>30</div>
<div>31</div>
<div>32</div>
<div>33</div>
<div>34</div>
<div>35</div>
</div>
</body>
</html>