Smart columns with CSS and jQuery

When you look at other "liquid based websites", I see two techniques commonly used in the display of columns: fixed-width columns and columns of varying width. There are two drawbacks to that I would like to mention, and then offer my solution .

Fixed-width columns

javascript:void(0)

The best thing to having fixed-width columns in a layout is that they will fill the view port with a maximum of columns that can fit into it. But as you can see there, some resolutions will view port, where they will leave a blank space where an excess column has not been able to fit.

Columns of varying width

Varying width columns leave no white space, and fit perfectly into your layout. The only downside is that we are constrained to have a fixed number of columns per row.

Smart columns with CSS & jQuery

A solution that could benefit both situations is to get the two scenarios and turn them into one.

Let the largest number of fixed-width columns to be aligned through the view port (how many fit, based on the basic size of the column) Take the white spaces in excess and distribute them equally to each column to complete a line. Thus, the columns will always fit perfectly.

Keep a fixed width as the base standard, so that the columns are reasonably within the size of columns you want, while maintaining enough flexibility to accommodate the view port expandable.

HTML

Start by creating an unordered list that behaves as columns.

CSS

jQuery

Conclusion

I'm planning to use this technique in the future, if someone has another idea, or uses other techniques, please share.