深入布局- grid布局

属性使用案例：

一、display 通过给元素设置：display:grid | inline-grid，可以让一个元素变成网格布局元素,

      display: grid：表示把元素定义为块级网格元素，单独占一行;（如下图:）

      display: inline-grid：表示把元素定义为行内块级网格元素，与其他行内元素同行;（如下图:）

二、grid-template-columns 与 grid-template-rows： 定义网格行和列的大小。取值如下：

none、[linenane]、length、percentage、flex、max-content、min-content、minmax(min,max)、auto、fit-content()、repeat()、

1.none: 表示没有显式的列轨道，任何列都将隐式生成，并且它们的大小将由 grid-auto-columns 属性确定。

2.length: 固定单位及百分比px, pt,vh, rem,。

3.percentage: 百分比： %。

4.auto:如果该网格轨道为最大时，该属性等同于 <max-content>，为最小时，则等同于 <min-content>。注意：：网格轨道大小为 auto（且只有为 auto）时，才可以被属性 align-content 和 justify-content 拉伸。

4.flex: 弹性系数 fr, 每个项目会根据弹性系数按比例分配剩余空间

  以2行3列的布局为例：行高为100px, 第一列宽50px, 第二列为1fr, di三列为2fr

.grid-container{
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 50px 1fr 2fr;
}

5.max-content、min-content、fit-content

• fit-content 表示公式 max(minimum, min(limit, max-content)),这基本上计算为 minmax(auto, max-content) 和 minmax(auto, limit) 两者中的较小值。
• max-content 以内容的最大宽度来定义。
• min-content 以内容的最小宽度来定义

以2行3列的布局为例：第一列为max-content, 第二列min-content, 第三列为fit-content(10px)， 效果如下：

grid-template-columns: max-content min-content fit-content(10px);

grid-template-columns: max-content min-content fit-content(200px);

6.minmax(min,max): 定义大小范围的属性，大于等于 min 值, 最大值可以设置为弹性系数fr, 最小值不行。

7.repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list>)：表示网格轨道的重复部分，以一种更简洁的方式去表示大量而且重复列的表达式。 

第一个参数

• 数字
• auto-fill：可用空间内创建尽可能多的网格，并在必要时压缩元素以填充空间(适合于需要灵活适应数量不同屏幕尺寸和元素的场景‌)
• auto-fit：容器宽度超出了元素所需宽度，会拉伸元素来填充容器，确保每行网格数最多等于元素个数（适合于固定数量的元素需要显示在每一行的情况）

注意： auto-fill auto-fit 必须在容器宽度足够大， 元素不换行的情况下才能看出区别

第二个参数

• 长度值，可使用单位包括vh、fr、px、em、%、ch等
• min-content
• max-content
• auto
• minmax()函数，其可以嵌套min()或者max()函数
• fit-content()函数
• 命名线

常见用法：

repeat(2, 20px)： 等价于 20px 20px

 repeat(2, 20px 1fr 90px), 等价于 20px 1fr 90px 20px 1fr 90px

repeat(auto-fit, 20px)， 以宽度20px 自适应布局。

8.[linenane]:来定义和引用网格线, 更精确地控制网格项在网格中的位置

三：gap: 用于定义网格的列和行的间距的缩写:

 <'row-gap'> <'column-gap'> 用法如下：

/* 一个| 两个 <length> 值 */
gap: 20px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 一个或两个 <percentage> 值 */
gap: 16% 100%;
gap: 21px 82%;