In order to have responsive multi column layouts I would use the typical float: left property on all my column classes and size them by percept of screen width. Well, there’s a cleaner and simpler way. Especially if you want your text to automatically flow and maintain even column height! I feel pretty late to the game on this – how did i miss it? Let’s get started on achieving even columns of text with wrapped content in columns. Apply to the parent container:
.wrap-column{ -moz-column-count: 2; -moz-column-gap: 2%; -webkit-column-count: 2; -webkit-column-gap: 2%; column-count: 2; column-gap: 2%; }
Column-count will denote the number of columns.The only issue right now is that the two column layout isn’t great for the tiny screen view – all that smushed text. So to make it responsive let’s do the screen change with @media
@media only screen and (max-width: 480px) {
.wrap-column{
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
Having CSS bug problems? Find out how to work around CSS Transition Effects creating a 1 pixel jump here.