HTML and CSS Reference
In-Depth Information
FIGURE 7.1
Multiple columns
were never this easy before!
SETTING THE NUMBER OF COLUMNS
To s t a r t , y o u u s e t h e
column-count
property to specify the number of columns
you want:
section {
column-count: 3;
}
Specifying a number of columns equally divides your content into that number
of columns across the horizontal space available. This produces the effect shown
in
Figure 7.1
.
Yo u c a n i m m e d i a t e l y is e e w h y t h i is i is u is e f u l : I t i is is o fl e x i b l e a n d e a is y. P r i o r t o
the introduction of this property, you had to break the content into multiple child
containers and then float those; if content or layout requirements changed, you
had to modify your markup.
NOTE:
In my code you'll see that to give the columns some space
around the edges and line up at the top, I had to apply some padding to
the whole
<section>
and remove the top padding from the first main
content
<h2>
. Yo u n e e d t of t h i n k c a r e f u l l y a b of u t t h i s k i n d of f s t y l i n g
when trying to get multi-col layouts to look right. You'll learn more
about this in a more complicated example later in this chapter.
