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-count, as the former expands and contracts the number of columns automatically based on the width of the parent container, with the value inside
column-widthserving as merely the minimum acceptable column width.
- For additional control while maintaining responsiveness, define your
columns using a combination of both
column-counttogether using the
columnsshorthand property. When used this way, the
column-widthproperty sets the minimum desired width of each column, while the
column-countis 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:
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.
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
together to create a responsive column
In this second demonstration, we'll use the
columns shorthand property to
column-count to take advantage of the
column-width while at the same time restricting the
maximum number of columns that may be generated using
-moz-columns: 150px 3;
-webkit-columns: 150px 3;
columns: 150px 3;
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