WebAppers

/ best free open source web resources /

Shopify

Autoresizing Smart Columns with jQuery

Posted · Category: Information, License Free

Currently, there are two commonly used techniques on displaying columns, the fixed columns and the liquid columns. With fixed columns, there will be certain viewport resolutions, where it leaves excess white space where a column was just not able to squeeze in. The downside of liquid columns is that we are restricted to having a fixed number of columns per row.

SohTanaka has thought of a solution: Smart Columns with CSS & jQuery would be able to benefit the situations is to take the good of both scenarios and mash it into one. Allow as many fixed columns to line up across the viewport. Take excess white space and evenly distribute them to each of the columns to complete the full row. This way the columns will always fit perfectly.

And also, It keeps a default fixed width as the base, so that the columns are reasonably within the intended columns sizes while maintaining enough flexibility to accommodate for the expandable viewport.

Smart Columns

Requirements: jQuery Framework
Demo: http://www.sohtanaka.com/web-design/examples/smart-columns/
License: License Free

3 Comments
  • http://www.toupil.fr Aurélien

    great idea !

  • http://www.webtrafficroi.com ZK@Web Marketing Blog

    To use the jQuery functions in our HTML document, we have to download the latest jQuery library from the jQuery download page and include the library in the document with a script tag like the following in the head of the page.

  • Pingback: A Web Developer’s Bookmarks « Hired Guns Creative

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons