Grid布局笔记

flex是一维布局，只能在一条直线上放置内容区块。
Grid是二维布局，可以将内容区块放置在任何地方。并非取代flexbox
二者可以配合使用
Grid最重要的三个概念：网格容器、网格项、网格区域
网格线为虚拟概念
网格线有多少与网格项没有直接的关联
网格轨道（Grid Track）两个相邻的网格线之间为网格轨道
Grid Cell（网格单元）两个相邻的列网格线和两个相邻的行网格线组成的是网格单元
网格单元和网格项的区别：网格项是实实在在存在的元素，
网格区域（Grid Area）四个网格线包围的总空间
fr(单位)剩余空间分配数，eg:分配一个元素200px,剩下的宽度给2个元素，第一个元素占1fr,第二个占2fr，剩下的宽度就分为三份，第一个占一份，第二个占两份
网格容器中的属性：
1.display 来说明哪个是网格容器 Grid-生成块级网格(用的比较多) inline-grid-生成行内网格（用的比较少，因为用flex更方便）subgrid如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列、行大小
注意：当设置了网格布局，column、float、clear、vertical-align属性无效，display：subgrid;目前所有浏览器都不兼容。
2.grid-template-columns 定义网格的列 grid-template-rows 定义网格的行 （注意之间都是用空格隔开）auto默认情况下是0 但由于div是块级元素 默认占满 所以剩下的宽度就全是auto的宽度

3. grid-template-rows的值往往根据grid-template-columns的值来变化，一个auto和两个auto都是同样的效果，一般用auto作为grid-template-rows比较多
   4.高度确定，rows就会平均分布,高度不确定,rows就会尽量收缩。

5.网格线可以拥有多个名字 用空格隔开

6.grid-template-areas 网格区域 注意多个s ，意思为多个区域。
7.网格区域是由多个网格单元组成，一个单元也可以组成网格区域，“.”点号代表一个空网格单元，none：没有定义网格区域，如以下图，千万不要上面写四个下面写三个，会出问题

Grid-template:可以将行、列、区域这三个写在这里面，但是不提倡。属性值 none：将三个属性都设置为其初始值，即为一行一列一个区域。不推荐使用，因为可以直接使用display:block;

只作用在内部之间 外面的顶上和顶部的不存在gap，且与表格一样，不能单独设置某一行或者某一列的gap

Items
Justify-items:沿着水平方向对齐容器中的内容

可以用 place-items：来融合items的水平和垂直方向。Place-items:start end;前者为列后者为行，跟gap是反着的。只写一个就是行和列相同

可以用 place-content：来融合content的水平和垂直方向。Place-content:start end;前者为列后者为行，跟gap是反着的。只写一个就是行和列相同

隐式轨道不建议大家使用

意思是如果要用grid的话，gap将被设置为初始值，不建议用grid简写