如何应用 网格布局

grid-area:上 左 下 右

width:1000px;height:1500px;

display:grid;

grid-tempalte-columns:10% 200px auto 3fr 2fr

w=1000*10%+200px+内容本身宽度，如果没有内容，默认为0

剩下部分1=1000-w*3/5

剩下部分2=1000-w*2/5

grid-template-rows:1fr第一行的高度=1500-剩下行的自动撑开的高度和

一般设置为auto

grid-template-columns:列

grid-template-rows:行

网格轨道（1,2网格线之间），网格单元（四个网格线组成的小单元），网格区域（2个及以上网格单元组成的）

单位：

fr类似于flex比例分布

gr不常用

网格容器，网格项，网格线

grid的单位  

grid container（网格容器）

grid item（网格项目）

grid line(实际上看不到)

justify-self 和 align-self （网格项本身的布局）

start/end/center/stretch

grid-area简写与等价原写法

grid-area的简写，与等价写法

span <number>的作用：

<!--此处有图片-->

案例二： 

<!--此处有图片--><!--此处有图片-->

隐式网格轨道的出现：<!--此处有图片--> 

 start\end网格线布局效果<!--此处有图片-->

在容器宽度内，auto-fill：可重复自动填充列数，不用像之前那样设定多少列数；auto-fit：有多少个网格项来确定可以有多少网格列

auto-fill、auto-fit要在repeat()中结合其他函数一起使用才有效，一般结合minmax()使用。

minmax设置最小最大的列宽范围，一般在repeat()中结合auto-fill、auto-fit使用发挥用处大。

显示3列，

max-content：列宽为内容的最大宽度，min-content：列宽为内容的最小宽度。

fit-content：与repeat()一样只能用于grid-template-columns/rows。

fit-content(100px)：表示最大是100px列宽。

本章所讲的grid属性有:

1. display

2. grid-template-rows(行高)，grid-template-columns(列宽)，grid-template-areas。简写：grid-template

3. grid-row-gad(行间距)，grid-column-gad(列间距)。简写：grid-gad（行，列）或gad（行，列）

   注：gad 旧低版浏览器不支持

4. justify-items（水平方向） 和 align-items（垂直方向）

   简写：place-items（垂直，水平）

5. justify-content（水平方向） 和 justify-content（垂直方向）

   简写：place-content（垂直，水平）

6. grid-auto-rows，grid-auto-columns，grid-auto-flow(自动布局算法的工作方式)。

   grid-auto：用于指定自动生成的网格轨道（也叫隐式网格轨道）的大小。

   隐式网格轨道：指超出指定网格范围的行/列时被创建的轨道。
   

简写网格区域areas

grid简写属性值设置解析

grid简写，汇总写一起的语法