在 grid布局中经常会看到有auto,fr这样的来表示长度，那么它们有啥区别呢？

auto和fr

fr表示占据剩余空间的多少，

例如grid-template-columns：1fr  50px ，那么1fr代表的是除了50px的剩余的部分，因为这里只有一个fr，2fr,3fr,...nfr结果都是一样的。

例如grid-template-columns：1fr  50px  2fr，那么1fr将占据剩余空间的1/3，2fr占据2/3。

auto是分配剩余空间，

例如grid-template-columns：auto  50px  auto，那么两个auto将会平分剩余空间，表现和1fr 50px 1fr是一样的。

auto遇上fr

如果auto遇上fr，那么auto将会被压缩成元素真实大小，因为fr会将可用的剩余空间全部占据。