HTML布局之grid布局

容器、项目、行列、网格线、单元格、轨道的基本概念，容器属性、项目属性的详细介绍以及案例展示

.慢慢亦漫漫

7912人浏览 · 2022-01-02 23:40:30

.慢慢亦漫漫 · 2022-01-02 23:40:30 发布

1. 关于grid布局

1.1 什么是grid布局

grid布局：grid布局是非常强大的css布局，它将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

1.2 容器和项目的基本概念

容器：整个采用网格布局的区域叫做容器（container）
项目：容器内部采用网格定位的子元素叫做项目（item）

1.3 行、列、网格线、单元格、轨道的基本概念

行列网格线单元格

行、列：容器中划分的水平区域叫做行，如上图粉色区域；垂直划分区域叫做列，如上图黄色区域。
单元格：行和列的交叉部分叫做单元格，如上图紫色覆盖区域，一般来说n行 m列会产生n x m个单元格。
网格线：划分区域的线叫做网格线，如上图桔黄色的线，一般来说，n行会有n+1根水平的网格线，m列同样有m+1根垂直的网格线。
轨道：两根网格线之间的空间

2.容器属性

2.1 display属性

display：grid可以指定采用网格布局
正常布局下的9个div
在body里写了9个div，一般情况下的表现形式如上图所示，现在给body设置display属性，
在这里插入图片描述

<style>
    body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
    }

设置display以后，div占满了body，现在需要我们划分行和列。

2.2 grid-template-columns ；grid-template-rows；grid-template （设置行、列）

grid-template-columns：定义网格布局中的列数，并可定义每列的宽度
grid-template-rows ：定义网格布局的行数以及行高
grid-template ：是grid-template-rows ，grid-template-columns简写
grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);（创建一个三行每行高度200px 三列每列宽度100px 的网格）

现在划分一个三行三列的网格，行高和列宽均为100px的网格布局

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }

三行三列网格的展示效果
该属性其他取值：
（1）百分比（length）：占用容器的百分之多少

（2）repeat：重复，他需要两个参数，第一个是划分了几行或几列，第二个是重复的值，
如果划分了三行，并且每行行高100px，那么就可以用repeat来写：grid-template-rows:repeat（3,100px）

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,100px);
        grid-template-rows: repeat(3,100px);
    }

展示效果
和我们每一项罗列出来效果是一样的。
（3） auto : auto关键字表示由浏览器自己决定长度

body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns:auto 100px  auto;
        grid-template-rows: repeat(3,100px);
    }

展示效果
（4）minmax：它表示一个长度范围，接受两个参数，一个是最小值，一个是最大值：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns:auto 100px  auto;
        grid-template-rows: repeat(3,minmax(150px,300px));
    }

minmax展示效果
（5）min-content；max-content
min-content：以网格项的最大的最小内容来占据网格轨道
max-content：以网格项的最大的内容来占据网格轨道
（6）fr关键字：这个单位用来表示分配剩余的空间，例如：grid-template-columns: 100px 4fr 1fr，表示第一列宽100px，剩余的空间分为5份，第二列宽是第三列的四倍。

body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: 100px 4fr 1fr;
        grid-template-rows: repeat(3,minmax(150px,300px));
    }

fr展示效果
（7）auto-fit；auto-fill
相同点：

都会尽可能多的创建轨道
不足一个轨道的空间平均分配给已有的轨道
区别：
auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
auto-fill的最后一步时保留空轨道留白，不会折叠空轨道
注意：auto-fit 和 auto-fill 只有在容器宽度大于子元素的最小宽度总和时才有显示区别
auto-fill的演示效果：

  body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(auto-fill,minmax(90px, 1fr));
        grid-template-rows: repeat(auto,100px);
    }

auto-fill的演示效果
auto-fit的演示效果：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(auto-fit,minmax(90px, 1fr));
        grid-template-rows: repeat(auto,100px);
    }

auto-fit的演示效果

2.3 grid-row-gap，grid-column-gap ；grid-gap

grid-row-gap：设置行间距
grid-column-gap：设置列间距
grid-gap：是grid-row-gap和grid-column-gap的简写形式，
书写格式：grid-gap: < grid-row-gap> < grid-column-gap>;

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        grid-gap: 20px 20px;
    }

grid-gap展示效果

2.4 justify-content；align-content

justify-content:整个内容区域在容器里面的水平位置
align-content: 整个内容区域的垂直位置
justify-content和align-content的取值是相同的，包括：start 、end、center 、stretch 、 space-around 、 space-between、space-evenly
（1）stretch：项目大小没有指定时，拉伸占据整个网格容器。

body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,minmax(100px,2fr));
        grid-template-rows: repeat(3,minmax(150px,1fr));
        
        justify-content:stretch;
        align-content:stretch;
    }

seretch的展示效果
（2）start：将网格对齐到网格容器的起始边缘：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:start;
        align-content:start;
    }

start展示效果
（3）end：将网格对齐到网格容器的结束边缘：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:end;
        align-content:end;
    }

end展示效果
（4）center：将网格对齐到居中位置：

body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:center;
        align-content:center;
    }

center居中展示效果
（5） space-evenly：项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔：

body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:space-evenly;
        align-content:space-evenly;
    }

space-evenly展示效果
（6）space-between ：项目与项目的间隔相等，项目与容器边框之间没有间隔：

  body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:space-between;
        align-content:space-between;
    }

space-between展示效果
（7）space-around：每个项目两侧的间隔相等，项目之间的间隔比项目与容器边框的间隔大一倍：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        
        justify-content:space-around;
        align-content:space-around;
    }

space-around展示效果

3.项目属性

3.1 grid-column-start 属性；grid-column-end 属性；grid-row-start 属性；grid-row-end 属性

grid-column-start 属性：单元格左边框所在的垂直网格线
grid-column-end 属性：单元格右边框所在的垂直网格线
grid-row-start 属性：单元格上边框所在的水平网格线
grid-row-end 属性：单元格下边框所在的水平网格线
项目的位置是可以指定的，指定它的边框定位在哪根网格线就可以指定项目位置，需要注意的是，没指定的边框位置否是采取默认值的。

比如：现在我们希望上图包含“a”的div占满第一行三个格子，高度不变，我们就需要设置div1的左边框在第一根网格线，右边框在第四根网格线：

 .div1{
        background-color: hotpink;
        grid-column-start:1;
        grid-column-end:4;
    }

在这里插入图片描述
现在，我们想让a占到bcef的位置，我们可以设置左边框在第1根网格线，右边框在第3根网格线，上边框在第2根网格线，下边框在第4根网格线：

.div1{
        background-color: hotpink;
        grid-column-start:1;
        grid-column-end:3;
        grid-row-start: 2;
        grid-row-end: 4;
    }

在这里插入图片描述
这四个属性的值除了直接指定网格线之外，还可以使用“span”直接跨越单元格，比如，我们希望a可以跨越第一行和第二行的前两个方格，那么我们就可以直接使用“span”：

 .div1{
        background-color: hotpink;
        grid-column-start:span 2;
        grid-row-start:span 2;
    }

在这里插入图片描述

3.2 grid-column 属性；grid-row 属性

grid-column 属性：是grid-column-start和grid-column-end的缩写
grid-column: < start-line> / < end-line>；
grid-row 属性：grid-row-start属性和grid-row-end的缩写
grid-column:grid-row: < start-line> / < end-line>;
比如说现在a想跨越第一行和第二行的前三个格子：

 .div1{
        background-color: hotpink;
        grid-column:1/4;
        grid-row:1/4;
    }

在这里插入图片描述

3.3 grid-area 属性

grid-area：指定内容放在哪个区域，可使用grid-row-start、grid-column-start、grid-row-end、 grid-column-end的合并简写形式，直接指定项目的位置，
书写格式： grid-area: < row-start> / < column-start> / < row-end> /
< column-end>;
比如说，现在我们想将a放在，正中间的格子里，我们可以在div1里面设置grid-area：

 .div1{
        background-color: hotpink;
        grid-area: 2/2/3/3;
    }

在这里插入图片描述

3.4 justify-self 属性；align-self 属性；place-self 属性

justify-self: 属性设置单元格内容的水平位置（左中右）
start、 end、 center 、stretch（默认值）
align-self:属性设置单元格内容的垂直位置（上中下）
start 、 end 、 center、stretch（默认值）;
place-self:属性是align-self属性和justify-self属性的合并简写形式
书写格式：place-self:center center;
注意：place-self需要两个值，如果我们忽略了一个值，那么会默认为两个值是相等的。
比如说：现在我们希望“a的内容”在单元格的正中央：

.div1{
        background-color: hotpink;
        place-self: center center;
        /* justify-self: center;
        align-self: center; 全称*/
    }

在这里插入图片描述

3.5 grid-auto-flow 属性

grid-auto-flow：划分网格之后元素会自动放入格子里，默认值是“row”，即是“先行后列”，这个属性可以设置元素放入格子的顺序是"先行后列"还是"先列后行"。column表示"先列后行"。
默认效果：

grid-auto-flow的值设置为column：

 body{
        width: 900px;
        height: 600px;
        margin: auto;
        border: chartreuse solid 5px;
        display: grid;
        grid-template-columns: repeat(3,150px);
        grid-template-rows: repeat(3,150px);
        justify-content:space-around;
        align-content:space-around;
        grid-auto-flow: column;
    }