Game Development Reference
In-Depth Information
With the new CSS columns feature, we can create a regular block of text, then tell
the CSS engine to display that block in two or more columns. Everything else is
handled by the browser very efficiently. For example, say we want a block of text
to be displayed into four equal width columns, with 20 pixels between each column.
This can be achieved with two intuitive lines of code (vendor prefix may be required,
but is deliberately ignored in this example).
<style>
div {
column-count: 4;
column-gap: 20px;
</style>
<div>
<p>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.</p>
<p>Nam liber tempor cum soluta nobis eleifend
option congue nihil imperdiet doming id quod
mazim placerat facer possim assum. Typi non
habent claritatem insitam; est usus legentis in
iis qui facit eorum claritatem. Investigationes
demonstraverunt lectores legere me lius quod ii
legunt saepius.</p>
<p>Claritas est etiam processus dynamicus,
qui sequitur mutationem consuetudium lectorum.
