纯CSS实现从上到下从左到右的列表布局方式
正常情况下,网页中的列表都是从左到右、从上到下的。
然而,在某些特定的设计需求下,我们可能需要实现一种从上到下、从左到右的列表布局。
虽然在网页中不常见,但如果真的碰到了这种布局,该如何实现呢?
有些小伙伴可能会想到用 JS
将元素数组分成三份,做成一个二维数组,然后每个数组嵌套一层容器水平排列就行了。幸运的是,CSS 提供了简便的方法来实现这样的列表布局。
一、grid 布局
很多同学很自然会想到grid
布局。没错,grid
也能实现这样的效果,不过有些局限性。
简单写一下页面结构,HTML
如下:
<div class="list"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> ...很多子元素 </div>
简单修饰一下:
.list{ width: 400px; outline: 3px solid #3E65FF; padding: 8px; counter-reset: num; } .item{ text-align: center; color: #fff; /* */ counter-increment: num; } .item::before{ content: counter(num); display: block; line-height: 30px; background-color: #3E65FF; }
我们这里通过计数器来显示编号,效果如下:
现在用grid
布局来实现3*N
的排列:
.list{ /**/ grid-template-columns: repeat(3, 1fr); gap: 8px; }
效果如下:
这就是正常的、一般见到的网格布局了。
如何改成从上到下、从左到右的方式呢?这里要用到grid-auto-flow
(资料),也就是改变网格的排列方式。
由于是纵向排列,所以得知道纵向一共有多少格,因此需要规定一下纵向的规则:
.list{ /**/ grid-auto-flow: column; grid-template-rows: repeat(8, 1fr); }
这样就分成了N*8
的网格,效果如下:
二、grid 布局的小问题
不过这种实现还有点问题,当子项比较少时,可能会这样:
其实也不算问题,如果你刚好就是需要这样的效果的话。那么,如何才能在这种情况下也能自动改变纵向的数量,让整个表格尽可能等分呢?
纯 CSS
暂时还没想到好办法,只能借助JS
来计算了。由于一般都是在框架里,所以这种计算也比较方便。我们可以用 CSS
变量来动态渲染,下面是vue
中的写法:
<div :style="--n: Math.ceil(list.length / 3)"> </div>
然后再CSS
中使用这个变量:
.list{ /**/ grid-auto-flow: column; grid-template-rows: repeat(var(--n), 1fr); }
这样就能动态排列了。
你可以访问链接查看真实效果。
三、columns 布局
没错我们这里又要用上这个不起眼的columns
布局。
这种从上到下,从左到右不正好就是 columns
擅长的吗?
比如默认布局是这样的:
我们只需要加上分栏数量就可以了:
.list{ column-count: 3; /* 分栏数量 */ }
无需任何其他规范,效果就出来了:
还可以通过column-gap
来设置分栏的间隔:
.list{ /**/ column-gap: 8px; /* 分栏间隔 */ }
这样就实现了我们想要的效果了,而且不论数量多少,都能自动等分。
是不是非常简单呢?你可以访问以下链接查看真实效果。
四、总结
一个非常实用的布局小技巧,你学到了吗?下面总结一下:
- 正常网页中的列表都是从左到右,从上到下的,但有时候也会碰到从上到下,从左到右的
grid
布局可以实现m*n
的网格布局grid
布局可以通过grid-auto-flow
,改变网格的排列方式grid
布局无法自动改变纵向的数量,让整个表格尽可能等分,需要借助一点点JS
columns
布局可以直接实现从上到下,从左到右的布局
码云笔记 » 纯CSS实现从上到下从左到右的列表布局方式