CSS Grid布局(1)

1.网格容器:通过display属性设置属性值为grid或inline-grid可以创建一个网格容器。网格容器中的所有子元素就会自动变成网格项目（grid item）

1.1网格项目默认放在行中，并且跨网格容器的全宽

2.显示网格:使用grid-template-columns和grid-template-rows属性可以显式的设置一个网格的列和行

2.1grid-template-rows指定的每个值可以创建每行的高度。行高的尺寸可以是任何非负值，长度可以是px、%、em等长度单位的值。

item1和item2具有固定的高，分别为50px和100px。因为只定义了两个行的高度值，所以item3和item4的高度是根据其自身的内容来定义

2.2grid-template-columns指定的每个值来创建每列的列宽

item4、item5和item6放置在新的一行（第二行），因为grid-template-columns只定义了三列的大小，它们也分别放置在列1、列2和列3；其中列1、列2和列3的尺寸大小等于item1、item2和item3宽度

fr单位可以帮助我们创建一个弹列的网格轨道。它代表了网格容器中可用的空间（就像Flexbox中无单位的值）

在这个示例中，网格容器分成了4等份（1 + 1 + 2 = 4），每一份（1fr）是网格容器宽度的四分之一。所以item1和item2的宽度是网格容器的四分之一宽，item3是网格容器宽度的四分之二（2fr）

当fr和其它长度单位的值结合在一起的时候，fr是基于网格容器可用空间来计算

在这个示例中，网格容器可用空间是网格宽度减去3rem和25%剩下的宽度，而fr就是基于这个尺寸计算

3.网格轨道最小和最大尺寸:可以通过minmax()函数来创建网格轨道的最小或最大尺寸

minmax()函数接受两个参数：第一个参数定义网格轨道的最小值，第二个参数定义网格轨道的最大值。可以接受任何长度值，也接受auto值。auto值允许网格轨道基于内容的尺寸拉伸或挤压

在这个示例中，第一行的高度最小值是100px，但其最大值为auto，允许行高可以变大超过100px

第一列设置了最小值为auto，但它的最大值是50%，也就是列的最大宽度不会超过网格容器宽度的50%

4.重复网格轨道:使用repeat()可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目

repeat()也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨道的尺寸

在这个示例中，第一列和最后一列的宽度都是30px，并且它们之间有另列三列，这三列是通过repeat()来创建的，而且每列的列宽是1fr（1fr = (网格宽度 - 30px - 30px) / 3）