Creating responsive CSS3 multi columns
Creating CSS3 multi-columns that are responsive is straightforward, and generally involves one of the following approaches:
- Specify your columns using
column-width
instead ofcolumn-count
, as the former expands and contracts the number of columns automatically based on the width of the parent container, with the value insidecolumn-width
serving as merely the minimum acceptable column width. - For additional control while maintaining responsiveness, define your
columns using a combination of both
column-width
andcolumn-count
together using thecolumns
shorthand property. When used this way, thecolumn-width
property sets the minimum desired width of each column, while thecolumn-count
is used to cap the maximum generated number of columns.
In a nutshell, do not use column-count
by itself if you wish your columns
to be responsive without additional work (ie: with the help of media
queries), as the property locks in the number of columns regardless of the
size of the container, which on a mobile device is not exactly roomy.
Both of the two responsive approaches mentioned above behave the same
when the screen is sufficiently small- the columns collapse into a single
column. The differences lies in what happens when the screen is sufficiently
large on desktop devices- with the first approach, additional columns will be
generated based on the total available width of the screen, while for the
2nd approach, the number of columns will be capped at that specified by the
column-count
property. Lets see an example of both:
- Using column-width
alone to create a responsive column layout
In the first demonstration, we'll simply use column-width
to define
columns that have a minimum width of 150px, with no restraints put on the
maximum number of columns that may be generated based on the container size.
article.columns{
-moz-column-width: 150px;
-webkit-column-width: 150px;
column-width: 150px;
}
Screenshot:
In the screen shot, we start out with 3 columns based on the available width of the container. As we downsize the window, the layout eventually collapses to a single column of minimum width 150px (responsive!). As we reverse the procedure and expand the window, we eventually get 4 columns, as the enlarged container can now accommodate more columns of minimum width 150px than the initial 3 we started out with..
- Using both column-width
and column-count
together to create a responsive column
layout
In this second demonstration, we'll use the columns
shorthand property to
specify both column-width
and column-count
to take advantage of the
responsiveness of column-width
while at the same time restricting the
maximum number of columns that may be generated using column-count
.
article.columns{
-moz-columns: 150px 3;
-webkit-columns: 150px 3;
columns: 150px 3;
}
Screenshot:
Here the columns behave the same when we downsize the window, though when we expand it, the maximum number of columns remains at 3 regardless of how wide we enlarge the window/ container.
Both responsive approaches have their place and time depending on what you wish to achieve.
- Introduction- column-width and column-count properties
- Other column related properties and customizations
- Creating responsive CSS3 multiple column layouts
End of Tutorial