grid fr单位说明

• fr 和 auto都可以实现自适应

  1. grid-template-columns: 50px auto;
  2. grid-template-columnus: 50px 1fr; 
  3. 以上两者效果相同，目前未发现在自适应方面二者有什么区别

• fr 与auto之间的区别

  1. grid-template-columns: 1fr auto 1fr;
  2. 此时auto可以实现中间自适应宽度

• fr 与 % 的区别

  1. grid-template-columns: 1fr 3fr 1fr;
  2. /* 因为百分比不支持gap轨道间距，所有会超出网格容器 */
  3. grid-template-columns: 20% 60% 20%;
  4. % 与 fr可以共存，计算方式：总宽度减去百分比宽度，剩下的宽度都分给fr;

• fr 与其他单位混合,如 em,px

  1. /* px是固定的，em也是固定;计算时要减去这些固定值,将剩下的空间在fr之间分配 */
  2. /* 总宽度 - 8em - 200px,将剩下的空间分配fr */
  3. grid-template-columns: 8em 1fr 2fr 200px;
  4. /* 网格宽度会受限制 */

• fr 尽可能不要与auto同时使用

  1. /* auto 与 px , em , 会自动计算 */
  2. grid-template-columns: 30% auto 10em;
  3. /* auto网格单位会被压缩 */
  4. grid-template-columns: 1fr auto 10em;