Add different column classes
Add column classes and add first class in every first column. Just change the _index = ( _index + 3 ); to your custom column. Example, if you want to create 5 columns change the _index + 3 to _index + 4 if you want to create 6 columns change the _index + 3 to _index + 5.
jQuery( document ).ready( function( $ ){ $( '.category-33 .content .entry' ).addClass( 'one-third' ); var _index = 0; $( '.category-33 .content .entry' ).each( function( index, element ){ if( index == _index ){ $( this ).addClass( 'first' ); _index = ( _index + 3 ); } }); });
/*---------------------------------------------------------------------------------------------------- COLUMNS ---------------------------------------------------------------------------------------------------- */ .five-sixths, .four-sixths, .four-fifths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-fifths, .three-sixths, .two-fourths, .two-fifths, .two-sixths, .two-thirds { float: left; margin-left: 2%; } .one-half, .three-sixths, .two-fourths { width: 49%; } .one-third, .two-sixths { width: 32%; } .four-sixths, .two-thirds { width: 66%; } .one-fourth { width: 23.5%; } .three-fourths { width: 74.5%; } .one-fifth { width: 18.4%; } .two-fifths { width: 38.8%; } .three-fifths { width: 59.2%; } .four-fifths { width: 79.6%; } .one-sixth { width: 15%; } .five-sixths { width: 83%; } .first { clear: both; margin-left: 0; }
Use the HTML/CSS Column Generator for easy job.