css grid布局fr单位理解

转自 fr 简介及实例
网格布局支持弹性尺寸（flex-size），这是一个很好的自适应布局技术。
fr是一个相对尺寸单位，表示剩余空间做等分，此项分配到的百分比(如果只有一个项使用此单位，那就占剩余空间的100%，所以多个项联合使用更有意义)

弹性尺寸使用fr尺寸单位，其来自 “fraction” 或 “fractional unit” 单词的前两个字母，表示整体空间的一部分。

css代码示例

#grid {
    display: grid;
    width: 100%;
    grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);
}
#title {
    background-color: lime;
}
#score {
    background-color: yellow;
}
#stats {
    background-color: lime;
}
#message {
    background-color: orange;
}
div {
    height: 80px;
    line-height: 80px;
    text-align: center;
}

HTML部分

<div id="grid">
    <div id="title">Site Logo</div>
    <div id="score">Slogan</div>
    <div id="stats">User Zone</div>
    <div id="message">Message</div>
</div>