grid布局基础到实战

一、grid布局基础

1.grid布局含义

grid布局，也被称之为网格布局，是将页面中的父元素划分成一个个小的格子，然后通过这些小的格子进行合并来制作出各种不同的网站效果。

2.如何触发网格布局：

给父元素添加display属性，并且将取值设置成:grid/inline-grid.grid：代表的是块状网格，默认独占一行，类似于块级元素。inline-grid：代表的是行内块网格，与行内块元素类似

3.触发网格有哪些特点

划分行列之后，才能将里面的区域进行划分，才能显示网格，才能进行合并

4.grid布局与flex布局异同，网格与表格区别

grid与flex布局：

相同点：都有容器和项目之分；

不同点：flex被称之为一维布局，也叫做轴线布局；grid被称之为二维布局，有行列之分

grid与表格：

相同点：都有行列之分都能划分格子

不同点：代码嵌套

二. grid布局概念

grid容器：采用grid布局的父元素

grid内容：显示项目的区域

grid项目：grid布局中每个格子内部放置的元素

行：横向

列：纵向

网格线：网格布局中的横向纵向的线条

一个m行n列的网格，需要使用m+1条横向，n+1条纵向网格线组成

单元格：横纵线交会的区域被称之为单元格

间距：网格与网格之间的距离

三. grid布局中的容器属性

1.容器触发网格

display: grid;（默认）

display: inline-grid;

2.划分行列属性

行属性：grid-template-rows;

列属性：grid-template-columns;

重点我们研究的是他们的取值

注意事项：后面跟几组值，就代表了几行几列

取值1：纯数值

行属性：grid-template-rows

列属性：grid-template-columns

{

grid-template-rows: 100px 100px 100px;

grid-template-columns: 100px 100px 100px;

}

代表的是：

1）划分一个3行3列的网格；

2）每一行行高：100px；

3）每一列列宽：100px；

取值2：百分比

{

grid-template-rows: 20% 30% 50%;

grid-template-columns: 100px 100px 100px;

}

代表的是：

1）划分一个3行3列的网格；

2）每一行行高：分别是总高的：20% 30% 50%；

3）每一列列宽：100px；

取值3：重复函数

{

grid-template-rows: repeat(3,100px);

grid-template-columns:repeat(5,20%);

}

代表的是：

1）划分一个3行5列的网格；

2）每一行行高：100px；

3）每一列列宽：均占总宽度的20%

4）注意：repeat函数，

第一个参数是重复的次数

第二个参数是需要重复的数值

取值4：自动填充

{

grid-template-rows: repeat(3,100px);

grid-template-columns: repeat(auto-fill,30%);

}

备注：在这里auto-fill会将烈数宽度按照30%的宽度进行划分；盛放不下的话则不在划分列数

取值5：auto自动

{

grid-template-rows:100px auto 100px;

grid-tempalte-columns: auto 100px 100px;

}

代码的含义是：

设置一个3行3列的网格

第1，3行固定高度100px；第2行高度自适应

第2，3列固定宽度100px；第1列宽度自适应

取值6：fr片段划分

片段划分：为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为"片段")。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

{

grid-template-rows: 1fr 2fr 3fr;

grid-template-columns: 100px 100px 100px;

}

代码含义：

1）划分3行3列的网格

2）其中行高总共划分成6份，第1行占1/6;第2行占2/6;第3行占3/6;

3）每一列的宽度为100px

取值7：minmax()

minmax(num1,num2)函数，可以理解成最小最大值函数，函数中两个参数；参数1代表的是最小值，参数2代表的是最大值

如果条件允许，则一直使用最大值，如果条件不满足则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值

{

grid-template-rows: 100px 100px minmax(100px, 200px);

grid-template-columns: 100px 100px 100px;

}

3.调整间距属性

行间距属性：grid-row-gap

列间距属性：grid-column-gap

{

grid-row-gap: 20px;

grid-column-gap:30px;

}

以上代码比较复杂，所以我们需要进行简写

使用属性: grid-gap: num1 num2;来实现，第一个参数代表的是行间距，第二个参数代表的是列间距

{

grid-gap:20px 30px;

}

4.调整顺序

如果想要给网格中添加项目，我们需要在容器中添加对应的div，这些div被称之为项目，项目会默认自动撑开显示单元格内部。

添加完对应的项目之后，默认项目是横向依次由左向右进行显示，第一行显示完毕之后，才会在第二行显示

我们可以使用：grid-auto-flow属性来完成

grid-auto-flow属性有两个取值，分别为：

row：横向显示

column：纵向显示

5.项目对齐方式

给项目添加宽度之后，默认项目是在单元格左上角显示的

修改项目对齐方式

水平对齐方式：justify-items

垂直对齐方式: align-items

{

justify-items: start;

}

这行代码代表的是，项目位于水平方向的开始位置(默认)

{

justify-items: center;

}

这行代码代表的是，项目位于水平方向的中间位置

{

justify-items: end;

}

这行代码代表的是，项目位于水平方向的结尾位置

{

align-items: start;

}

这行代码代表的是，项目位于垂直方向的开始位置(默认)

{

align-items: center;

}

这行代码代表的是，项目位于垂直方向的居中位置

{

align-items: end;

}

这行代码代表的是，项目位于垂直方向的结尾位置

项目可以通过justify-item是，和align-items属性实现在单元格水平和垂直方向对齐，除了start，center，end这三个取值之外，另有一个默认值就是stretch拉伸效果

但是以上两个属性均为单一属性，可以用对应的复合属性来实现

place-items: align-items justify-items

第一个取值代表的是垂直方向

第二个取值代表的是水平方向

6.网格对齐方式

默认情况下网格位于容器的左上角位置显示，我们可以使用

水平方式对齐属性：justify-content

垂直方向对齐属性：align-content

{

justify-content:start;

}

此行代码代表的是：网格位于容器水平方向开始位置显示(默认)

{

justify-content:center;

}

此行代码代表的是：网格位于容器水平方向中间位置显示

{

justify-content:end;

}

此行代码代表的是：网格位于容器水平方向结束位置显示

{

align-content:start;

}

此行代码代表的是：网格位于容器垂直方向开始位置显示(默认)

{

align-content:center;

}

此行代码代表的是：网格位于容器垂直方向中间位置显示

{

align-content:end;

}

此行代码代表的是：网格位于容器垂直方向结束位置显示

水平方向和垂直方向都进行位置调整的复合属性

属性：place-content:

取值：align-content justify-content

代码例如：

{

place-content: center center;

}

需要注意：justify-content align-content 取值除了有start，end，center，这些取值之外，还有对应的stretch，space-around，space-evenly等值

stretch：代表的是拉伸默认值

space-around：行列间距环绕

space-between：行列两端对齐

space-evenly：行列间距平分

{

justify-content: space-between;

}

四. grid布局中的项目属性

1.合并单元格属性

合并单元格是将划分好的网格，通过让元素使用网格线占位的形式，来达到合并的效果。

我们可以使用：

grid-column-start 纵向网格线开始占位

grid-column-end 纵向网格线开始占位

grid-row-start 横向网格线开始占位

grid-row-start 横向网格线结束占位

五. grid案例分析

<!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>
         *{
             margin: 0;
             padding: 0;
         }
         .box{
             width: 1700px;
             height: 500px;
             border: 10px solid gray;
             margin: 100px auto;
             /* 触发网格 */
             display: grid;
             /* 划分行列 */
             grid-template-rows: repeat(4,100px);
             grid-template-columns: repeat(13,100px);
             /* 调整间距 */
             grid-gap: 10px 10px;
             /* 网格对齐方式 */
             place-content: center center;
         }
         .box>div{
             background-color: red;
         }
         .box1{
             grid-row: 1/3;
             grid-column: 12/14;
         }
         .box2{
             grid-row: 1/2;
             grid-column: 10/12;
         }
         .box3{
             grid-row: 2/3;
             grid-column: 1/3;
         }
         .box4{
             grid-row: 2/4;
             grid-column: 6/9;
         }
         .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 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>
 </body>
 </html>
 ​