repeat()函数auto-fill关键字效果实例页面

展示

代码

• HTML：

  <div class="container">
      <item></item>
      <item></item>
      <item></item>
      <item></item>
      <item></item>
  </div>

• CSS：

  .container {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      border: 1px dashed;
  }
  item {
      background-color: deepskyblue;
      padding: 50px 0;
  }