简介
通过使用css网格布局，我们得到了一个新的灵活单元：FR单元。FR是一个分数单位，1FR代表可用空间的1部分。以下是fr单元工作的几个例子。这些示例中的网格项被放置到具有网格区域的网格上。
1.container {
2 display: grid;
3
4 grid-template-columns: 1fr 1fr 1fr 1fr;
5 grid-template-rows: 100px 200px 100px;
6
7 grid-template-areas:
8 "head head2 . side"
9 "main main2 . side"
10 "footer footer footer footer";
11}
这4列每列都占用相同的空间量。
Head
Head 2
Main
Main 2
Side
Footer
fr使用示例
下面是上面的例子，有不同的 fr 值。注意布局中的变化：
1.container {
2 /* ... */
3
4 grid-template-columns: 1fr 1fr 40px 20%;
5 grid-template-rows: 100px 200px 100px;
6
7 /* ... */
8}
Head
Head 2
Main
Main 2
Side
Footer
在下面的最后一个示例中，侧栏项覆盖2fr，因此它的宽度将与跨越第一列和第二列的项相同：
1.container {
2 /* ... */
3
4 grid-template-columns: 1fr 1fr 40px 2fr;
5 grid-template-rows: 100px 200px 100px;
6
7 /* ... */
8}
Head
Head 2
Main
Main 2
Side
Footer
混合单元
正如您在前面的示例中看到的，您可以将fr值与固定值和百分比值混合使用。Fr值将在其他值取走后剩余的空间之间进行划分。
例如，如果你有一个4列的网格，如下面的代码片段，第一列将是300px，第二列是80px（800px的10%)，第三和第四列将是210px（每列占用剩余空间的一半)：
1main {
2 width: 800px;
3 display: grid;
4 grid-template-columns: 300px 10% 1fr 1fr;
5 /* 300px 80px 210px 210px */
6
7 grid-template-rows: auto;
8}