css列数自适应的grid布局-526互联

近期做项目，遇到了一点样式上的问题，理论上通过直接改 / 嵌套一层来解决比较容易，但实际上，数据结构没我想象中的简单具体例子如下：

demo

期望效果：　　　　　　　　　　　　　实际效果：（flex布局）　　　　　　　　　实际效果配合伪类（.main::after { width: 100px;content: '' } ）

当前效果产生的原因（以vue项目为例）：循环生成的标签，内部有v-if， v-else判断（即当前两种不同样式的标签处于同一层级）

可以看到，实际效果配合伪类（flex布局）还是和期望效果存在差距，为什么，看代码层级，当前p标签和div标签层级属于同一级，通过给main下的最后标签设置伪类，并不能解决7、8区域的样式问题。

因此， flex布局用不了，暂时无法区分p标签值为8的标签和div标签

找了下，有个grid布局，在main标签的css下设置 grid-template-columns: repeat(auto-fill, 100px);

此时的效果，所有标签都按照100px来划分区块大小

这种也不满足需求，如何让div独立出来占满整行呢

看了下，在grid（网格）布局下有 grid-column-start 和 grid-column-end 属性，给 div 设置 grid-column-start: 1; grid-column-end: span 3; 符合条件

但是，grid-column-end: span 3; 这个3表示的是结束位置在第三列，又不满足列数自适应的效果

有没有可能让他撑满整行呢，有！设置 grid-column-end: -1; 这样相当于开始位置位于网格的最前面，结束位置为网格的最后面，就能撑满

整体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .main {
        width: 350px;
        outline: 1px solid;
        display: grid;
        justify-content: space-between;
        grid-template-columns: repeat(auto-fill, 100px);
    }
    .main>p {
        width: 100px;
        height: 100px;
        margin-bottom: 10px;
        background-color: lightgreen;
    } 
    .main>div {
        grid-column-start: 1;
        grid-column-end: span 3;
        height: 100px;
        width: 100%;
        margin-bottom: 10px;
        background: #ccc;
    } 
</style>
<body>
    <div class="main">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <div>1234</div>
        <p>11</p>
        <p>12</p>
        <p>13</p>
        <p>14</p>
        <p>15</p>
        <p>16</p>
        <p>17</p>
        <p>18</p>
    </div>
</body>
</html>

View Code

总结：当前问题出现的原因为，后台返回的数据内，同一层级下既有标题又有表单，标题占全行，表单固定宽度适应屏幕，就会存在如上图flex布局实际效果图，最后一行会在中间有空余，单纯让他左对齐，网上方法很多，但都不适用于当前这种结构，原想法是拿到div的上一个p标签，给他单独设置样式（比如flex:1），但试了半天，没能拿到...有更好的解决方案 / 其他问题，欢迎评论补充。