当前位置：首页 > 科技 > 软件

使用 CSS Columns 布局来实现自动分组布局

来源：责编：时间：2023-10-30 17:24:51 311观看

导读最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下图中序号是 dom 序列，所以其实这这样的一个顺序。很多同学可能

最近在项目中碰到这样一个布局，有一个列表，先按照 4 * 2 的正常顺序排列，当超过 8 个后，会横向重新开始 4 * 2 的布局，有点像一个个独立的分组，然后水平排列，如下

图中序号是 dom 序列，所以其实这这样的一个顺序。

很多同学可能会想到给子元素分组（通过 JS将原数组拆分组合成一个二维数组），每 8 个套一层容器，然后水平排列就行了

是不是有点麻烦呢？

其实，无需单独嵌套容器也能实现类似分组的效果，这就需要借助本文要介绍的 column 布局了，一起看看吧~

一、简单介绍一下 columns

平时接触较多的都是flex或者grid，但还有一个columns布局往往被忽视了。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/columns

columns布局，又称“多列”布局（或者“分栏”布局），这是一个使用场景比较有限，但是几乎无法被替代的一种布局。

使用非常简单，直接看一个例子，假设有这样一段文本

p{  width: 500px;}

<p>欢迎关注前端侦探，这里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如这篇文章，如何使用 CSS columns 布局来实现自动分组布局，一起看看吧</p>

默认是这样的。

下面我们将段文本分成3列。

p{  columns: 3;}

看，自动就分成了3列。

并且阅读顺序是从左到右，从下到下，直到整列阅读完成，非常类似以前的报刊读物阅读习惯。

除了指定列数，还可以根据指定宽度自动去计算列数，比如：

p{  columns: 100px;}

效果如下：

这个表示按照最小100px去分段，看最多可以分成多少列，并不是说每列就一定是 100，应该是大于等于 100，直到剩余空间可以再放下一列。

那为啥设置的是100，总宽度是500，却只分成了4列？原因是有「默认列间距」，如果去除这个间距。

p{  column-gap: 0px;}

这样就刚好被分成了5列。

看不清楚？加个分割线试试。

p{	column-rule: 1px solid red;}

是不是刚好分成了 5 列？（注意，这里的分割线是不占空间的）。

简单了解columns多列布局后，下面来看另外的用途。

二、columns 实现横向分组布局

可能你已经发现了，上面的文本分列布局和我们文章开头所需要的效果非常类似，都是一列一列的，因此我们可以尝试用columns布局来实现这样的效果。

假设html是这样的。

<div class="wrap">  <div class="list">    <div class="item">1</div>    <div class="item">2</div>    <div class="item">3</div>    <div class="item">4</div>    <div class="item">5</div>    <div class="item">6</div>    <div class="item">7</div>    <div class="item">8</div>    <div class="item">9</div>    <div class="item">10</div>    <div class="item">11</div>    <div class="item">12</div>    <div class="item">13</div>    <div class="item">14</div>  </div></div>

这里多了一层wrap是用来做滚动容器的，简单修饰一下。

.wrap{  display: flex;  width: 400px;  overflow: auto;  outline: 1px dashed #9747FF;}.item{  display: inline-flex;  width: 80px;  margin: 10px;  aspect-ratio: 1/1;  background: #FFE8A3;  color: #333;  font-size: 30px;  border-radius: 10px;  align-items: center;  justify-content: center;}

效果如下，很正常的一个布局。

现在，我们希望纵向高度是固定的，然后横向滚动，先加一个高度试试。

.list{  height: 200px;}

这样就变成了纵向滚动的布局了。

那么，如何让它横向分栏并且滚动呢？其实非常简单，只需要添加一行。

.list{  height: 200px;  column-width: 400px;}

设置分栏宽度为滚动容器宽度之后，就自动将整个列表分成多组了，相当于每个滚动屏幕作为一组，从左到右排列，由于空间不足，所以可以横向滚动。

是不是非常神奇？仅需一个属性就实现了纵向滚动到横向滚动的切换。

三、借助 scroll-snap 实现轮播效果

通常碰到这种横向滚动的效果，你可能会想到一个swiper组件，也就是那种一屏一屏切换的效果，没错，我们这里也可以借助scroll-snap轻易实现。

关于scroll-snap，网上教程非常多，MDN 官网也有非常清晰的 demo，如果不熟悉的可以先去了解一下：https://developer.mozilla.org/zh-CN/docs/Web/CSS/scroll-snap-type。

这里就不详细介绍了。

回到这里，由于整个列表下面只有一层子元素，好像并没有办法区分每一屏的临界点。其实不然，可以想一下，这里每一屏有 8 个元素，也就是第1、9、17...个分别是每一屏的第一个元素，是不是可以以这些元素为标识（吸附对象）呢?

首先要在滚动容器下定义一下。

.wrap{  scroll-snap-type: x mandatory;}

然后给第1、9、17...个元素添加吸附对象，这里可以用nth-child选择器。

.item:nth-child(8n+1){  scroll-snap-align: start;}

效果如下（为了区分，把每一屏的第一个元素背景做了高亮）。

还可以多添加点元素，多切几屏看看效果：

完整代码可以参考：

CSS columns (juejin.cn)[1]
CSS column (codepen.io)[2]

四、CSS 实现的优势和总结

相对于传统的 JS实现来说，有哪些好处呢？

少了一层嵌套容器，业务逻辑会根据干净。
自适应强，可以根据需求选择固定列数或者固定宽度，JS往往只能根据数量去分组。
不会报错，想想看，JS中的数组经常会出现xxx.slice is not function这样的错误，轻则警告，总则整个页面白屏。
布局足够灵活，想横向滚动就横向滚动，想纵向滚动就纵向滚动，而JS方式往往还需要改变数组形态。

有这么多好处还不赶紧用起来？下面再来回顾一下columns布局。

columns布局，又称“多列”布局（或者“分栏”布局），可以将默认的文本流轻易分成多栏，非常类似以前的报刊读物排版。
column可以通过宽度(column-width)去自动分割，或者通过指定数量(column-count)将布局分成多少栏。
column-gap可以设置分栏之间的空隙，默认是有间隔的。
column-rule可以设置分隔线，这种分割线是不占据空间的。
columns布局使用场景比较有限，但是几乎无法被替代。

多想象一下，其实可以有更多的使用场景，虽然本来并不是做这个事情的。

[1]CSS columns (juejin.cn)： https://code.juejin.cn/pen/7293927297596260379。

[2]CSS column (codepen.io)： https://codepen.io/xboxyan/pen/RwvPLEM。

本文链接：//www.dmpip.com//www.dmpip.com/showinfo-26-15891-0.html使用 CSS Columns 布局来实现自动分组布局

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Java中未正确关闭文件、数据库连接或网络连接，造成资源泄漏

下一篇：你知道吗？Django QuerySet 的这些实用技巧，你一定要会！

标签：

热门焦点

Redmi Pad评测：红米充满野心的一次尝试

从Note系列到K系列，从蓝牙耳机到笔记本电脑，红米不知不觉之间也已经形成了自己颇有竞争力的产品体系，在中端和次旗舰市场上甚至要比小米新机的表现来得更好，正所谓“大丈夫生居
vivo TWS Air开箱体验：真轻臻好听

在vivo S15系列新机的发布会上，vivo的最新款真无线蓝牙耳机vivo TWS Air也一同发布，本次就这款耳机新品给大家带来一个简单的分享。外包装盒上，vivo TWS Air保持了vivo自家产
如何正确使用:Has和:Nth-Last-Child

我们可以用CSS检查，以了解一组元素的数量是否小于或等于一个数字。例如，一个拥有三个或更多子项的grid。你可能会想，为什么需要这样做呢？在某些情况下，一个组件或一个布局可能会
深度探索 Elasticsearch 8.X：function_score 参数解读与实战案例分析

在 Elasticsearch 中，function_score 可以让我们在查询的同时对搜索结果进行自定义评分。function_score 提供了一系列的参数和函数让我们可以根据需求灵活地进行设置。近期
使用LLM插件从命令行访问Llama 2

最近的一个大新闻是Meta AI推出了新的开源授权的大型语言模型Llama 2。这是一项非常重要的进展：Llama 2可免费用于研究和商业用途。(几小时前，swyy发现它已从LLaMA 2更名为Lla
小米公益基金会捐赠2500万元驰援北京、河北暴雨救灾

8月2日消息，今日小米科技创始人雷军在其微博上发布消息称，小米公益基金会宣布捐赠2500万元驰援北京、河北暴雨救灾。携手抗灾，京冀安康！以下为公告原文
华为HarmonyOS 4升级计划公布：首批34款机型今日开启公测

8月4日消息，今天下午华为正式发布了HarmonyOS 4系统，在更流畅的前提下，还带来了不少新功能，UI设计也有变化，会让手机焕然一新。华为宣布，首批机型将会在
三星Galaxy Z Fold5官方渲染图曝光：13.4mm折叠厚度依旧感人

据官方此前宣布，三星将于7月26日在韩国首尔举办Unpacked活动，届时将带来带来包括Galaxy Buds 3、Galaxy Watch 6、Galaxy Tab S9、Galaxy Z Flip 5、
电博会上海尔智家模拟500平大平层，还原生活空间沉浸式体验

电博会为了更好地让参展观众真正感受到智能家居的绝妙之处，海尔智家的程传岭先生同样介绍了展会上海尔智家的模拟500平大平层，还原生活空间沉浸式体验。程传