Site icon Anthony Carbon

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.

Exit mobile version