CSS Visual ToolsLesson 81Free preview

Multi-Column

This lesson is part of Web Developer Tools · All levels

Summary

Multi-column generators set text to flow to multiple columns like newspaper pages. Properties such as column-count, column-width, column-gap, and column-rule govern the number of columns, distances, and dividing lines. This layout is best suited for long articles, not for a whole page.

Key points

Column-count specifies the number of columns desired
Column-width gives the minimum width so that the number of columns adjusts the space
Column-gap sets the distance between columns
Column-rule makes a dividing line between columns
Break-inside: avoid preventing elements being cut between columns

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.