gridlayout布局列没有生效_前端学习笔记10 grid布局

注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

一 心得体会

之前的学习完全没有覆盖到这个，现在算是第一次接触。参考的文档是阮一峰老师的《CSS Grid 网格布局教程》和MDN文档。阮一峰老师的文章讲解的通俗易懂，值得阅读。以下是阅读《CSS Grid 网格布局教程》和MDN文档时的笔记。

二 相关知识点

1 grid模型

1.1 容器和项目

与flex模型一样，grid模型也有容器和项目，其结构也与flex模型一样。

1.2 行和列

顾名思义，容器内部水平区域为“行”，垂直区域为“列”。

1.3 单元格

行和列交叉区域，称为“单元格”。

1.4 网格线

划分网格的线，称为“网格线”。

以下图4*4网格为例，网格有四行，四列，16个单元格，5根水平网格线，5跟垂直网格线。

同flex模型一样，grid模型有多种属性，分别作用于容器和项目2 容器属性

2.1 display

display: grid | inline-grid;

该属性确定了作用元素的布局方式为gird。grid和inline-grid的区别在于容器在normal flow中的布局方式。

2.2 grid-template-columns (grid-template-rows)属性

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

指定grid网格布局后，需要划分行和列，以grid-template-columns 为例，其定义了每一列的列宽，有几个参数值就代表分几列。grid-template-columns属性值为百分比时同理。

grid-template-columns还有一些特殊的属性值

(1)fr 关键字

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

fr是fraction(片段)的缩写，其表示的是列宽的相对关系，以上代码表示第二列是第一列的2倍，第三列是第一列的3倍。

(2)repeat()

repeat函数接受两个参数，第一个参数时重复的次数，第二个参数是所要重复的值。

 grid-template-columns: repeat(3, 33.33% 100px 200px);

上述代码含义是：容器内分9列，每三列为一组，宽度依次是33.33%，100px，200px。

(3)auto-fill 关键字

单元格大小固定，容器大小不确定。希望每一行容纳尽可能多的单元格。

 grid-template-columns: repeat(auto-fill, 100px);

(4)minmax()

minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。

 grid-template-columns: 100px 1fr 2fr 30% minmax(100px, 2fr);

(5)auto 关键字

auto关键字表示列宽由浏览器决定，正常情况下都是填满剩余宽度。

(6)网格线的名称

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。

grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];

上述代码中的c1/r1均是网格线的名称。

2.3 grid-template-areas 属性

上述grid-template-rows(grid-template-columns)定义了单元格，grid-template-areas属性则是定义一个区域占用的单元格，示例代码如下

测试盒子0

测试盒子2

测试盒子3

测试盒子4

/*css代码*/.box { height: 90vh; display: grid; grid-template-rows: 100px 1fr 100px; grid-template-columns: 100px 1fr; grid-template-areas: 'header header' 'nav main' 'nav foot';}.test1 { background: red; grid-area: header;}.test3 { background: skyblue; grid-area: nav;}.test4 { background: orange; grid-area: main;}.test5 { background: yellowgreen; grid-area: foot;}

我们首先再容器内定义属性grid-template-rows(grid-template-columns)确定单元格划分，然后使用grid-template-areas属性定义每个单元格归属的区域。上述代码将第一行的单元格划分到同一个区域，将第二行和第三行的第一列单元格划分到一个区域，从而形成了我们常见的布局，显示效果如下图。

注意：

1. 要使grid-template-areas属性生效，必须再每个项目中定义grid-area属性表明其属于的区域。
2. 内部项目的排列顺序与声明顺序无关，与所属区域有关。

2.4 grid-row-gap(grid-column-gap / grid-gap)属性(新规定中grid-可以省略)

以grid-row-gap为例，其表示的是行之间的间距，下面的代码表示行间距为20px

grid-row-gap: 20px;

grid-gap属性为行列间距集合，示例代码如下

grid-gap: 20px 20px;

2.5 grid-auto-flow 属性

/*项目排列顺序*/grid-auto-flow:row(默认) | column | dense

属性值含义依次是：1. 先行后列；2. 先列后行；3. “稠密”堆积。

注意：dense属性值表示“稠密”堆积算法，意思是当顺序排列时，前面有因项目过大而产生空白，后面如果有适当大小的项目会填充空白，这样会导致排列次序打乱。dense分为row dense和column dense。

2.6 justify-items/align-items/place-items属性

justify-items和align-items属性表示项目在相应单元格内的位置。justify-items属性表示水平方向位置，align-items属性表示垂直方向位置，place-items属性时以上两个属性的简写。

justify-items: start | end | center | stretch(默认); align-items: start | end | center | stretch(默认);

justify-items和align-items的属性值完全一致，其属性值分别代表的含义是：1. 对齐单元格起始边缘；2. 对齐单元格结束边缘；3. 内部居中；4. 拉伸占满单元格。

2.7 justify-content/align-content/place-content 属性

justify-content和align-content属性表示内容区域在容器内的位置。justify-content属性表示水平方向位置，align-content属性表示垂直方向位置，place-content 属性时以上两个属性的简写。

justify-content: start|end|center|stretch(默认)|space-around|space-between|space-evenly;align-content: start|end|center|stretch(默认)|space-around|space-between|space-evenly; 

首先我们需要搞清楚内容区域和容器的大小关系。内容区域是由 grid-template-columns (grid-template-rows)决定的，其确定了容器内有多少个单元格，每个单元格对应的大小，这些单元格合起来就是内容区域，而容器大小是由容器的宽高决定的。所以他们两个大小不存在相互约束的关系。

justify-content和align-content的属性值完全一致，其属性值分别代表的含义是：1. 对齐容器初始边缘；2. 对齐容器结束边缘；3. 容器内居中；4. 单元格大小未指定，拉伸占据整个网格容器；5. 单元格两侧间距相等(单元格之间的间距比单元格与容器边框的间距大一倍)；6. 单元格之间间距相等(单元格与容器边框无间距)；7.单元格之间间距和单元格与容器边框间距相等。

2.8 grid-auto-columns/grid-auto-rows 属性

使用grid-template-columns(grid-template-rows)指定单元格之后，还有项目需要放入单元格，可以使用grid-auto-columns和grid-auto-rows属性为新增的单元格定义，其使用方法与grid-template-columns(grid-template-rows)完全相同。以下面代码为例

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

以上代码表示初始单元格为3*3且每个单元格宽高均为100px，新增行高为50px。

2.9 grid-template/grid 属性

grid-template属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的合并简写形式。

grid属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的合并简写形式。

3 项目属性

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

以 grid-column-start/grid-column-end为例，

grid-column-start:auto | interger | span interger;grid-column-end: auto | interger | span interger;

grid-column-start属性值含义分别是：1. 自动；2. 左边框所在的垂直网格线序号；3. 项目跨越的网格数。

grid-column-end属性值含义分别是：1. 自动；2. 右边框所在的垂直网格线序号；3. 项目跨越的网格数。

grid-row-start与grid-row-end同理。

3.2 grid-column/grid-row 属性

grid-column属性是grid-column-start和grid-column-end的合并简写形式，grid-row属性是grid-row-start属性和grid-row-end的合并简写形式。

注意：使用简写时，两个属性值需要用“/”分隔开

3.3 grid-area 属性

该属性表示指定项目存放的单元格位置，与容器属性grid-template-areas配合使用。

grid-area 属性还可以作为grid-row-start、grid-column-start、grid-row-end、grid-column-end的合并简写形式，具体代码如下

 grid-area:  /  /  / ;

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

与justify-items/align-items/place-items属性用法完全相同，区别在于justify-self/align-self/place-self 属性作用于项目，只对该项目有效，而justify-items/align-items/place-items属性作用于容器，对容器内的所有项目有效。

三 需要注意的细节

1. 项目只能是容器的顶层子元素，不包含项目的子元素。Grid 布局只对项目生效。
2. 设为网格布局以后，容器子元素(项目)的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
3. ,,可以同时使用，非常方便。
4. 当justify-items或align-items属性值不是stretch时，项目一般不会占满单元格，如果项目有设置宽高，那么项目依据设置宽高来显示；如果项目未设置宽高，那么项目依据自身内容来显示。
5. 如果未定义grid-auto-columns和grid-auto-rows属性，新增的单元格大小根据项目内容大小来决定。
6. grid布局方式比较新，所以兼容性方面肯定没有flex好，需要自己注意兼容。