Categories:

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 of 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-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 and column-count together using the columns shorthand property. When used this way, the column-width property sets the minimum desired width of each column, while the column-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.

End of Tutorial

Partners