Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu mi et turpis laoreet maximus vitae porta lorem. In non accumsan est, in ultricies dolor. Sed lacinia purus eu tempus cursus. Aliquam eu tortor turpis. Pellentesque maximus nisl a quam aliquet ornare. Integer venenatis rutrum tristique. Quisque at feugiat sapien. Sed orci ipsum, tempor quis pharetra id, mattis id orci. Donec et sapien ut dolor tempus lobortis ac porta orci. Integer auctor pulvinar tortor nec volutpat. Duis consequat volutpat vehicula. Sed at erat in sapien placerat vestibulum lobortis vitae quam. Aliquam erat volutpat. Sed condimentum ipsum metus, a mattis ante cursus sit amet. Maecenas eu sodales orci. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim enim. Enim diam vulputate ut pharetra sit amet aliquam id diam. Sit amet cursus sit amet dictum. Pellentesque habitant morbi tristique senectus et. Vulputate dignissim suspendisse in est ante in. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Risus nullam eget felis eget nunc lobortis mattis. Donec ac odio tempor orci dapibus ultrices in iaculis. Orci nulla pellentesque dignissim enim sit amet. Maecenas ultricies mi eget mauris pharetra et. Non sodales neque sodales ut etiam. Commodo nulla facilisi nullam vehicula ipsum a arcu. Blandit volutpat maecenas volutpat blandit. Elementum facilisis leo vel fringilla est. Mattis pellentesque id nibh tortor id aliquet. Enim diam vulputate ut pharetra sit amet aliquam id diam. Vel orci porta non pulvinar neque. Nullam vehicula ipsum a arcu cursus. Condimentum id venenatis a condimentum vitae sapien pellentesque. Natoque penatibus et magnis dis parturient montes. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Ipsum dolor sit amet consectetur adipiscing. Sed faucibus turpis in eu mi bibendum neque egestas congue. Enim neque volutpat ac tincidunt vitae semper. Metus vulputate eu scelerisque felis imperdiet proin fermentum leo. Auctor urna nunc id cursus. Elementum curabitur vitae nunc sed velit dignissim sodales ut. Nec feugiat nisl pretium fusce id velit.
This free multiple columns CSS generator lets you flow text and content into a newspaper-style multi-column layout without writing the rules by hand. Adjust the column count, column gap, and the divider rule's style, width, and color, and watch the live preview update instantly. When your layout looks right, copy the generated CSS and paste it into your stylesheet. It builds on the CSS multi-column properties like column-count, column-gap, and column-rule. Looking for cool fonts too? Try our Font Keyboard app on iOS and Android.
Frequently Asked Questions
What does the CSS column-count property do?
column-count sets how many columns the content of an element is divided into, flowing text and inline content from one column to the next like a newspaper. The browser automatically balances content across the specified number of columns.
How do I add space and a line between CSS columns?
Use column-gap to set the spacing between columns and column-rule to draw a divider in the gap. column-rule is shorthand for column-rule-width, column-rule-style (solid, dotted, dashed, etc.), and column-rule-color, matching the border syntax.
Is the CSS multi-column layout supported in all browsers?
Yes. The multi-column properties (column-count, column-gap, column-rule) are supported in all modern browsers including Chrome, Firefox, Safari, and Edge. Very old browsers may need -webkit- or -moz- prefixes.
What is the difference between column-count and CSS Grid or Flexbox columns?
Multi-column layout automatically flows a single block of content across columns and balances it, which is ideal for continuous text. Grid and Flexbox place distinct items into a layout and give you explicit control over each item's position instead.
