css列数自适应的grid布局
近期做项目,遇到了一点样式上的问题,理论上通过直接改 / 嵌套一层来解决比较容易,但实际上,数据结构没我想象中的简单具体例子如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
期望效果: 实际效果:(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; 这样相当于开始位置位于网格的最前面,结束位置为网格的最后面,就能撑满
整体代码如下:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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>
总结: 当前问题出现的原因为,后台返回的数据内,同一层级下既有标题又有表单,标题占全行, 表单固定宽度适应屏幕,就会存在如上图flex布局实际效果图,最后一行会在中间有空余,单纯让他左对齐,网上方法很多,但都不适用于当前这种结构,原想法是拿到div的上一个p标签,给他单独设置样式(比如flex:1),但试了半天,没能拿到...有更好的解决方案 / 其他问题,欢迎评论补充。