CSS fr单位的详解

				青春须早为，岂能长少年。——孟郊《劝学》

这周在逆战班中学了许多东西。例如：flex布局、CSS Grid 网格布局、移动端rem布局、移动端流式布局、移动端flex布局、移动端响应式布局等等。几天写的是关于CSS Grid 网格布局的fr单位。
CSS中有不少属性是以长度作为值的。盒模型的属性就是一些很明显的值属性：width、height、margin、padding、border。除此之外还有很多其他的CSS属性的值同样也是长度值，像字体的大小、间距等。CSS中有哪些长度单位可以作为属性的值呢？这样的单位有很多。如px、em、rem、vw等等。今天要讲的就是“fr”。
fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。弹性尺寸使用fr尺寸单位，其来自 “fraction”这个单词的前两个字母，表示整体空间的一部分。
css代码示例：

#box{ width:300px; height: 300px; border:1px black solid; margin:100px;        display:grid;       
 grid-template:
 "a1 a1 a1" 1fr
 "a3 a3 a2" 1fr 
 "a3 a3 a2" 1fr
/1fr 1fr 1fr;    }   
 #box div{ background:red; border:1px yellow dashed;}  
 #box div:nth-of-type(1){ grid-area: a1;}  
 #box div:nth-of-type(2){ grid-area: a2;}    
 #box div:nth-of-type(3){ grid-area: a3;}

HTML部分：

用fr分配空间得到的网格如下：