Columns
Generate CSS multi-column layouts
The column-count CSS property breaks an element's content into the specified number of columns.
Option
Preview
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem nobis a reiciendis, illo asperiores soluta quisquam neque vero, aliquid quos impedit assumenda alias ut earum? Eaque consectetur sint repellat dolorem.
Code
column-count: 1;CSS column-count example
HTML
<p class='columns'>
This is a bunch of text split into three columns using the CSS "column-count" property. The text is equally distributed over the columns.
</p>CSS
.columns {
column-count: 3;
}result
This is a bunch of text split into three columns using the CSS `column-count` property. The text is equally distributed over the columns.
Related Tools in CSS Styling & Layout Generators
More browser-based utilities in this collection
Background Gradient
Generate CSS gradient backgrounds
Background Image
Generate CSS background image code
Blur
Generate CSS blur filter effects
Border Image
Generate CSS border-image properties
Border Radius
Generate CSS border-radius properties
Border
Generate CSS border properties
Box Shadow
Generate CSS box-shadow effects
Brightness
Generate CSS brightness filters