css grid 布局 fr 和 % 有区别吗？（grid-template-column 1fr 1fr 或 50% 50%）

本文链接：https://blog.youkuaiyun.com/qq_40144303/article/details/123825073

答案是有的，但也要看情况

如果你父子级别宽高写死是肯定没有区别的



  <style>
    .grid-all {
      width: 600px;
      height: 150px;
    }
    .grid-item {
      /* width: 100%; */
      /* height: 100%; */
      width: 150px;
      height: 150px;
    }
    .green {
      background-color: aquamarine;
    }
    .blue {
      background-color: rgb(127, 182, 255);
    }
    .red {
      background-color: rgba(224, 57, 71, 0.158);
    }
    .pink {
      background-color: rgb(174, 0, 255);
    }
    .grid-fr {
      display: grid;
      height: 100%;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;
    }
    .grid-per {
      height: 100%;
      margin-top: 20px;
      display: grid;
      grid-template-columns: 25% 25% 25% 25%;
      gap: 20px;
    }
  </style>
  <body>
    <div class="grid-all">
      <div class="grid-fr">
        <div class="grid-item green"></div>
        <div class="grid-item blue"></div>
        <div class="grid-item red"></div>
        <div class="grid-item pink"></div>
      </div>

      <div class="grid-per">
        <div class="grid-item green"></div>
        <div class="grid-item blue"></div>
        <div class="grid-item red"></div>
        <div class="grid-item pink"></div>
      </div>
    </div>
  </body>
</html>

得到的图形是什么呢，如图