我们在发文章的时候经常会用到列表,有些时候希望出现多列列表的话WP默认编辑器的列表功能就无法满足我们,所以这里给大家推荐这款Lazy Lists插件,它支持列表排序和多列展示的功能。
默认的单列显示列表效果如下:
换成多列显示后效果如下:
明显的,在长列表的情况下,分为多列展示对于网页界面展示来说要更好。
这款Lazy Lists的功能就可以帮助你实现了。
除了多列外,还支持A-Z的排序,最多支持5列显示。
Lazy Lists是一款古腾堡编辑器下的插件,经典编辑器的话不支持。
多列列表排版的现代化思考
在早期的 WordPress 站点中,站长常常依赖如 Lazy Lists 等第三方小插件来实现无序列表(ul/li)的双列或三列横向排列。但随着现代前端 CSS 标准的演进,使用原生 CSS Grid(网格)实现多列列表不仅零代码冗余,而且完美适应多端屏幕。
极简现代纯 CSS 替代方案
只需在主题自定义的额外 CSS 中添加几行代码,并为列表赋予一个类名即可:
/* 纯原生响应式多列列表排版 */
.multi-column-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px 24px;
padding-left: 0;
list-style-position: inside;
}