Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


jquery.columns extends the native jQuery css method to be able parse viewport relative units (vh & vw only) and provides a method to quickly create reponsive layouts.


License: MIT
Support: IE8*, IE9-10, Webkit, Firefox, Opera
* IE8 requires polyfills for html5 and media queries.

How to use it:

Create block containers at body level so they cover 100% width and add a class row-X where X is "columns per row". Then put as many div.col inside as you want. You can push columns using the class push-X.

<header class="row-1">
  <div class="col">
    <!-- content -->

<article class="row-3">
  <div class='col'> 
    <!-- content -->
  <div class='col'>
    <!-- content -->
  <div class="col">
    <!-- content -->
  <div class='col'> 
    <!-- content -->
  <div class='col'>
    <!-- content -->
  <div class="col">
    <!-- content -->

<footer class="row-3">
  <div class="col">
    <!-- content -->  
  <div class="col push-1">
    <!-- content -->  

Then call the plugin:


When you add columns dynamically make sure to call $.columns.refresh() after they've been added to the DOM.


Adjust breakPoints and fontSize min and max values and everything in between will be auto-adjusted based the current window size.

defaults = {
  center: true // center layout?
  breakPoints: [ [1024, 95], [2560, 45] ] // [ [min res, width percent], [max res, width percent] ]
  fontSize: [14, 16] // [min, max] in pixels

You can also change the number of columns of a row at different width breakpoints by simply giving an id to your row containers and calling $.columns.setCols:

  // set 2 columns per row on #mycontainer when window is less than 1280,
  // and 1 column per row when it's less than 1024
  'mycontainer': [ [1024, 1], [1280, 2] ]
  'mycontainer2' [ [1024, 1] ] 

To calculate the maximum width of the layout in pixels (ie. for image sizes):

widthInPx = maxRes * (widthPercent * 100); // Default: 2560 * (45/100) = 1152px

Using the extended css method:

With jquery.columns you can pass viewport units to the css method and it will be converted to px and updated on window.resize, so the integration is seamless.

Note: Make sure to pass an object when setting viewport units even if just one property.

// This centers an element in the middle of the screen and
// auto-adjusts when the window is resized to keep proportions
  width: '50vw',
  height: '50vh',
  marginLeft: '25vw'
  marginTop: '25vh',
  fontSize: '5vw'

// You may have to trigger window.resize 
// to load the changes for the first time


Viewport relative responsive grids






No releases published


No packages published