想要使用CSS将div元素的内容分成多列来显示，可以使用columns属性。columns属性一个简写属性，可以设置列数和列宽，用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性，希望对大家有所帮助。
columns 属性是一个简写属性，一次可以采用多个值；用于设置列宽和列数。
语法：
属性值：
● auto： 这会将列宽和列计数值设置为其浏览器默认值。
示例：
效果图：
注意：如果未指定column-width和column-count中的任何值，则浏览器默认将其值设置为auto。
● column-width和columns-count ：用于使用整数值指定列宽和列数。
效果图：
浏览器支持：
● Chrome 50.0, 4.0 -webkit-
● Edge 10.0
● Firefox 52.0, 9.0 -moz-
● Safari 9.0, 3.1 -webkit-
● Opera 37.0, 15.0 -webkit- 11.1
一.使用 transition 实现会用到 steps(count, position) 方法，它是一个 timing function ，会把过渡分成 count 步 position 的默认值是 end ，还可以为 start 。假如现在有一个动画分成5段， end 会在第一段的时间执行完后才到第一段的终点即第二段的起点，一次类推执行动画，当执行到最后一段时，到达不了最后一步的终点就会到回到起点重新开始执行动画；而 start 是先到第一段的终点，等第一段的时间执行完后，到达第二段的终点，以此类推，能到达最后一段的终点。
具体实现如下：
效果图：
未完待续。。。
