株洲房产网优化大师官网下载安装
1.grid布局的含义
CSS Grid 布局是一种强大的二维布局系统，可以同时处理行和列，非常适合用于复杂的多行多列布局。它将网页划分为一个个网格单元，可以任意组合不同的网格，实现各种各样的布局。
2.grid布局中的基础概念
总结结论：一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成
3.grid布局中的容器属性
- 通过设置
display: grid或display: inline-grid使一个元素成为网格容器。
划分行列属性：
repeat函数，第一个参数是重复的次数，第二个参数为需要重复的数值
自动填充：auto-fill 应用在重复函数中，代表的是根据需要重复的数值，进行自动填充数量
auto自动：代表的是占剩余宽度和剩余高度的所有
调整间距：
现在行间距属性和列间距属性通过 row-gap 和 column-gap 设置
调整顺序：
调整网格对于单元格的对齐方式：
复合属性 place-items：center center；
第一个值为 垂直方向，第二个值为 水平方向
调整网格位于容器中的对齐方式：
复合属性：place-content：center center；
第一个值为 垂直方向，第二个值为 水平方向
space-around：行与行之间的间距 是 贴边行距容器间距 的 2 倍
space-between：贴边
4.grid布局中的项目属性
代码实战 
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 1700px;height: 500px;border: 10px solid #999999;margin: 100px auto;/* 触发网格 */display: grid;grid-template-rows: repeat(4,100px);grid-template-columns: repeat(13,100px);grid-gap: 10px;place-content: center center;}.box div {background-color: aquamarine;}.box1 { grid-row: 1/3;grid-column: 12/14;}.box2 { grid-row: 1/2;grid-column: 10/12;}.box3 { grid-row: 2/4;grid-column: 6/9;}.box4 { grid-row: 2/3;grid-column: 1/3;}.box5 { grid-row: 3/5;grid-column: 1/3;}.box6 { grid-row: 4/5;grid-column: 12/14;}</style>
</head>
<body><!-- 容器 --><div class="box"><!-- div{$}*52 --><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div><div class="box6">6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>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>36</div><div>37</div><div>38</div><!-- <div>39</div><div>40</div><div>41</div><div>42</div><div>43</div><div>44</div><div>45</div><div>46</div><div>47</div><div>48</div><div>49</div><div>50</div><div>51</div><div>52</div> --></div>
</body>
</html>