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.
