grid布局-解决flex布局,space-between最后一行没有左对齐

116 阅读1分钟

  .container {
    /* grid替换flex */
    display: grid; 
    /* 添加列的排列方式 */
    grid-template-columns: repeat(auto-fill, 100px); 
    justify-content: space-between;
    gap: 10px;
  }

  .container .item {
    height: 40px;
    border: 1px solid #ccc;
    border-radius: 4px;
    /* 设置100%自动填充grid单元格 */
    width: 100%; 
  }

更多gird相关概念查看ruanyifeng.com/blog/2019/0…