近期做项目，遇到了一点样式上的问题，理论上通过直接改 / 嵌套一层来解决比较容易，但实际上，数据结构没我想象中的简单具体例子如下：
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），但试了半天，没能拿到...有更好的解决方案 / 其他问题，欢迎评论补充。
标签：column,标签,100px,grid,列数,div,main,css From： https://www.cnblogs.com/workJiang/p/17268401.html