当前位置：首页 > news >正文

grid网格布局图解

news 来源：原创 2025/5/14 17:52:47

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>