The CSS3 multi-column layout allows easy definition of multiple columns of text – just like in newspapers.
Support
A supported browser will make calculations to wrap and balance content into tidy columns.
Even if your favorite browser doesn’t support multi-column layouts, keep in mind that they degrade gracefully into a single column layout.
CSS3 Multi Columns are responsive and adjust automatically on different screen sizes.
Two Columns
<div class="two-columns"> ... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. in iaculis nibh pharetra quis. Nunc eu pretium tortor. Integer id est facilisis, posuere nisl vitae, bibendum mi. Proin finibus mattis diam ac vulputate.
Three Columns
<div class="three-columns"> ... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. in iaculis nibh pharetra quis. Nunc eu pretium tortor. Integer id est facilisis, posuere nisl vitae, bibendum mi. Proin finibus mattis diam ac vulputate.
Four Columns
<div class="four-columns"> ... </div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. in iaculis nibh pharetra quis. Nunc eu pretium tortor. Integer id est facilisis, posuere nisl vitae, bibendum mi. Proin finibus mattis diam ac vulputate.