我们前面讲的Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看做是一维布局，Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看做是二维布局，Grid布局远比Flex布局强大
grid布局像一个个子一个格子的排列，更加灵活，更加强大。
常用布局方式
- 传统布局方式
- 利用position属性+display属性+float属性布局，兼容性最好，但是效率低，麻烦
- flex布局
- 有自己的一套属性，效率高，学习成本低，兼容性强
- grid布局
- 网格布局(Grid)是最强大的css布局方案。但是知识点较多，学习成本相对困难，目前的兼容性不如flex好
基本概念图
每个grid布局，有隐藏的网格线，用来帮助定位的
准备一个大div，里面包裹住10个div，然后给每个div的内容设置不同的数字和背景色，方便标识
和flex布局一样，拥有容器和项目的概念
容器共有15个属性：
- grid-tamplate-columns：设置容器每列的宽度(项目的宽度)
- grid-template-rows：设置容器每行的宽度(项目的高度)
- grid-row-gap：设置每行之间的行间距
- grid-column-gap：设置每列之间的列间距
- grid-gap：上面两个设置的简写
- grid-template-areas：一个区域由单个或多个单元格组成，由你决定(具体使用，需要在项目属性里面设置)
- grid-auto-flow：划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序，和flex布局的属性基本一样)
- justify-items：设置单元格内容的水平和垂直的对齐方式(主(水平)方向)
- align-items：设置单元格内容的水平和垂直的对齐方式(副(垂直)方向)
- place-items：上面两个属性的简写
- justify-content：设置整个内容区域的水平和垂直的对齐方式(主(水平))
- align-content：设置整个内容区域的水平和垂直的对齐方式(副(垂直))
- place-content：上面两个属性的简写
- grid-auto-columns：用来设置多出来的项目的宽
- grid-auto-rows：用来设置多出来的项目的高
1、grid-tamplate-columns
常和一起使用，想要多少行和列，就填写相应属性值的个数，不填写，自动分配
比如我想设置前三行和前四列的宽高为100px
2、grid-template-rows
一般和上个属性搭配使用，上面演示了。。。
grid-template-* 值写法
- repeat()：第一个参数是重复的次数，第二个参数是所要重复的值
- auto-fill：有时，单元格的大小时固定的，但是容器的大小不确定，这个属性就会自动填充
- fr：为了方便表示比例关系，网格布局提供了fr关键字(fraction的缩写，意为：片段)
- minmax()：函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值
演示需要先把容器的宽高去掉
- auto：表示由浏览器自己决定长度
- 网格线，可以用方括号定义网格线名称，方便以后的引用
3、grid-row-gap
项目之间的行间距,一般和一起使用
比如想要设置每个项目之间的间距为10px
4、grid-column-gap
项目之间的列间距，一般和上面一起使用，上面一起演示了
5、grid-gap
上面两个间距的合并的写法，如果行列间距值一样，可以只写一个
grid-*-gap扩展
根据最新标准，上面三个属性名的
6、grid-template-areas
一个区域由单个或多个单元格组成，由你决定具体使用，需要在项目属性里面设置
7、grid-auto-flow
划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”即先填满第一行，再开始放入第二行(就是子元素的排放顺序)
默认是
grid-auto-flow扩展
- 可以合理利用空间
注意：拥有以上效果，需要先给元素单独设置属性，表示占表格列的第一条线开始，到第三条线结束的距离，后面讲项目的时候会讲到
8、justify-items
设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值
- start：开头
- end：尾部
- center：中间
- stretch
需要给项目里面内容单独设置宽度才能看出来
8.1、start
8.1、end
8.1、center
9、align-items
设置单元格内容的水平和垂直的对齐方式(水平方向)，有四个值
- start：开头
- end：尾部
- center：中间
- stretch
需要给项目里面内容单独设置宽度才能看出来，这里只演示一个了
10、place-items
上面两个属性的简写，如果值一样，可以只写一个
11、justify-content
设置整个内容区域的水平对齐方式，共有7个值：
- start：行首
- end：行尾
- center：行中间
- stretch
- space-around：和flex布局的效果一样，均匀排列每个元素，首个元素放置于起点，末尾元素放置于重点
- space-betweeen：和flex布局的效果一样，均匀排列每个元素，每个元素周围分配相同的空间
- space-evenly：均匀排列每个元素，每个元素之间的建个相等
11.1、start
11.2、end
11.3、center
11.4、space-around
11.5、space-between
11.6、space-evenly
12、align-content
设置整个内容区域的垂直对齐方式,和上面一样，拥有七个值，这里就不再一一列举了，举两个例子
12.1、end
12.2、space-around
13、place-content
上面两个属性的简写
14、grid-auto-columns
用来设置多出来的项目的宽
我这里内容区设置三行三列的行列为100px，这样就多出来一个div10没有设置。
可以单独给多出来的元素设置宽
15、grid-auto-rows
用来设置多出来的项目的高
项目共有10个属性
- grid-column-start：用来指定item的具体位置，根据在哪根网格线(起始线)
- grid-column-end：用来指定item的具体位置，根据在哪根网格线(结束线)
- grid-row-start：用来指定item的具体位置，根据在哪根网格线(起始线)
- grid-row-end：用来指定item的具体位置，根据在哪根网格线(结束线)
- grid-column：1和2的简写形式
- grid-row：3和4的简写形式
- grid-area：指定项目放在哪一个区域
- justify-self：justify-self属性设置单元格内容的水平位置 (左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)
- align-self：align-self属性设置单元格内容的垂直位置 (上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)
- place-self：8和9的简写形式
1、grid-column-start
用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示
2、grid-column-end
用来指定item的具体位置，根据在哪根网格线(结束线)
比如我第一个元素需要使用所在行上两个格子
3、grid-row-start
用来指定item的具体位置，根据在哪根网格线(起始线)，和下面的属性一起使用，在下面一起演示
4、grid-row-end
用来指定item的具体位置，根据在哪根网格线(结束线)
比如我第一个元素需要使用所在行上两个格子，所在列上两个格子
5、grid-column
1和2的简写形式，使用 / 分隔
6、grid-row
3和4的简写形式，使用 / 分隔
7、grid-area
指定项目放在哪一个区域，搭配使用
8、justify-self
justify-self属性设置单元格内容的水平位置 (左中右)，跟justify-items属性的用法完全一致但只作用于单个项目(水平方向)，也是四个值
- start
- end
- center
- stretch
8.1、start
8.2、end
8.3、center
9、align-self
align-self属性设置单元格内容的垂直位置 (上中下)，跟align-items属性的用法完全一致也是只作用于单个项目(垂直方向)，和上面的值一样
9.1、start
9.2、end
9.3、center
10、place-self
上面两个的简写
版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/rfx/40267.html