Grid实现多行定高宽度自适应布局

使用场景：适用于纯css实现多行的列表卡片，卡片高度固定，要求父元素被子元素占满宽度，但是子元素不能超过某一个宽度值，达到宽度在一定范围内自适应超出自动换行的效果。

之前想用flex实现，但发现效果不理想。于是使用gird实现，能够完美契合想要的效果。

废话不多说，上代码：

<!--父元素-->
<div class="grid">
    <!--子元素-->
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
    <div class="cell">7</div>
    <div class="cell">8</div>
    <div class="cell">9</div>
    <div class="cell">10</div>
    <div class="cell">11</div>
    <div class="cell">12</div>
    <div class="cell">13</div>
    <div class="cell">14</div>
    <div class="cell">15</div>
 </div>

.grid{
    display: grid;
    /* 设置每一列重复，最小宽度274px，剩余位置不够274，则被当前子元素自动填充，当剩余超过274，自动多  一个子元素 */
    grid-template-columns: repeat(auto-fill, minmax(274px, 1fr));
    grid-gap: 12px;
    padding: 12px;
    border: 1px solid #ddd;
}
.cell{
    background-color: rgb(169, 31, 255);
    /* 每个子元素高度一致 */
    height: 100px;
    line-height: 100px;;
    text-align:center;
    color:#fff;
}

在线预览效果：code.juejin.cn/pen/7501531…