grid布局和Flex布局有一些相似，其中的一些概念也是相通的；比如容器与项目的概念；容器指的是整个grid布局块的包裹元素，在容器层设置display：grid或者display: inline-grid；项目则是指容器内的最顶层元素；当然，除了flex的容器和项目的概念，grid还引入了网格线和单元格的概念，不管水平方向，网格线总比单元格数多1，并且可以指定每条网格线的名称；
display：可选的值有grid及inline-grid
.container { display: grid | inline-grid; }grid-template-columns/ grid-template-rows： 定义容器中的每个项目（单元格）的宽高及网格线名称，可以接受的参数包括可选的网格线名称及网格宽高；尺寸可以是固定值，也可以是相对值；
.container { display: grid; grid-template-columns: 1fr minmax(100px, 1fr) 1fr; grid-template-rows: 100px 100px auto; grid-template-rows: [a] 100px [b] 100px [3] auto [end]; }(1) repeat(count, target)：用于重复某个值多次，避免不必要的重复书写；第二个参数接受长度、百分比、flex属性（max-content、min-content、auto、auto-fill、auto-fit）； (2) auto-fill：单元格宽度固定而容器宽度可变时可以使用该属性进行自动填充，与repeat搭配使用； (3) fr：grid布局中用于标识相互大小关系的量； (4) minmax(min, max)：可以为某个项目的宽或高进行最小值和最大值的限制； (5) auto：与flex中的auto类似，自动填充剩余空间； (6) fit-content(value)：计算方式为min(maximum size, max(minimum size, value))，其中max-size由max-content定义，minimum size的计算由auto决定；参见demo
// repeat .container { grid-template-columns: repeat(3, 100px); grid-template-columns: repeat(2, 100px) 100px; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(4, 25%); grid-template-columns: repeat(2, 1fr 2fr) 100px; // 模式匹配 grid-template-columns: repeat(2, [col-start] 1fr [col-end]) 2fr; grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, minmax(100px, 1fr)); grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, auto); // 与上一个等价 grid-template-columns: repeat(3, max-content); // 具体见下文 grid-template-columns: repeat(3, min-content); // 具体见下文 grid-template-columns: repeat(auto-fill, 100px); // 容器宽度不定，由定长的项目填充, 可参见https://jsfiddle.net/wc15vf6m/ grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); grid-template-columns: repeat(auto-fit, 3); // }auto-fill与auto-fit比较： （1）auto-fill：
如果容器在该方向上具有有限或最大尺寸，那么重复次数是使网格布局不溢出的最大正整数；否则如果任意重复次数均会导致溢出，那么重复次数为1；否则如果容器有一个有限的最小尺寸，那么重复次数将是满足最小值要求的最小正整数；
（2）auto-fit：
一般情况下与auto-fill保持一致，知道多出来的空白空间足够容纳下新的列并且不会导致溢出；此时auto-fit更倾向于将已有的列扩大相同的倍数，而不是像auto-fill一样增加许多不可见的列；这其实与flex中的一些属性也是相通的（shrink、grow）；两者的grow属性不同而已；
demo中的容器宽度为100%，是一个有限宽度，因此，总是会取使项目不溢出的最大正整数；网格宽度为100px，项目数为6，当容器宽度大于600多像素时就可以看到两者的表现差异性了；auto-fill在保证不溢出及不低于项目最小宽度的情况下添加了许多不可见的列，而auto-fit使用这些列等比放大去填充整个多出来的空白空间；
max-content与min-content： max-content与min-content与对项目内容的处理存在差异，这与width: max-content | min-content具有相似性；max-content表示所有子元素中的宽度最大值；min-coontent表示采用所有子元素中的最小宽度的最大值；查看demo和demo2的差异；
grid-template-areas：grid-template-columns和grid-template-rows只是对容器进行单元格划分，这样和flex有些相近，但是grid-template-areas则为grid更大赋能，从而让其可以满足各种丰富的布局需求；该属性为每个单元格命名，然后在区域中使用grid-area属性指定该区域对应的单元格，从而可以实现单元格的多种组合效果区域命名后对应的水平和垂直方向网格线会被自动命名，起始和终止位置分别为areaName-start，areaName-end； 具体可以参见demo
#container { display: grid; width: 100%; height: 300px; grid-template-rows: 50px 1fr 30px; grid-template-columns: minmax(100px, 1fr) 5fr; grid-template-areas: "head head" "nav main" "nav footer"; text-align: center; } header { grid-area: head; background: #bfbfbf; } nav { grid-area: nav; background: orange; } ....grid-template：是grid-template-columns、grid-template-rows及grid-template-areas的缩写；上面网页布局的css使用缩写为：
#container { display: grid; width: 100%; height: 300px; grid-template: "head head" 50px "nav main" 1fr "nav footer" 30px / minmax(100px, 1fr) 5fr; text-align: center; } header { grid-area: head; background: #bfbfbf; } nav { grid-area: nav; background: orange; } main { grid-area: main; background: lightblue; } footer { grid-area: footer; background: yellow; }grid-row-gap、grid-column-gap及grid-gap：表示项目（单元格）间的行间距、列间距及间距（行间距 | 列间距）；
grid-auto-column、grid-auto-row及grid-auto-flow：表示行或列自动排列的方式，支持长度、百分比及flex值；grid-auto-flow控制项目的自动排列方式，支持四个值——row、column、row dense、column dense；
justify-content、align-items及place-content：表示所有项目相对于容器的布局方式；justify-content表示水平布局、align-items为垂直方向布局、place-content为两者的简写；前两者取值可以为start、end、center、stretch；
grid：是六个属性的集合——grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow；
参考文献
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layouthttp://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.htmlhttps://css-tricks.com/snippets/css/complete-guide-grid/https://developer.mozilla.org/en-US/docs/Web/CSS/minmaxhttps://developer.mozilla.org/en-US/docs/Web/CSS/repeathttps://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/https://stackoverflow.com/questions/51285308/how-do-min-content-and-max-content-workhttps://www.zhangxinxu.com/wordpress/2016/05/css3-width-max-contnet-min-content-fit-content/https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content