Berlin theme from Graph Paper Press – Grid Posts

Hi there!

I’ve tried to implement a few different methods to accomplish the following to no avail, and I believe it may be due to the theme I’m using. None of the solutions I’ve found have been specific to that theme, namely “Berlin theme from Graph Paper Press”

I’d like to have a specific Category (in this case the ‘products’ Page seen here https://www.kinetikcycles.com/category/products/ ) display as a grid of posts (3 columns wide) rather then the normal “list” as seen on the rest of the site, less the main/home page.

This is the code I’ve tried, put in a category-products.php file.

<?php
$counter = 1; //start counter

$grids = 3; //Grids per row

global $query_string; //Need this to make pagination work

/*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */
query_posts($query_string . '&caller_get_posts=1&posts_per_page=12');

if(have_posts()) :	while(have_posts()) :  the_post();
?>
<?php
//Show the left hand side column
if($counter == 1 || $counter == 2) :
?>
			<div class="griditemleft">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<?php
//Show the right hand side column
elseif($counter == $grids) :
?>
<div class="griditemright">
				<div class="postimage">
					<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a>
				</div>
                <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
			</div>
<div class="clear"></div>
<?php
$counter = 0;
endif;
?>
<?php
$counter++;
endwhile;
//Pagination can go here if you want it.
endif;
?>

I’ve also then included the following at the bottom of the style.css file, perhaps the wrong location?

#gridcontainer{margin: 20px 0; width: 100%; }
#gridcontainer h2 a{color: #77787a; font-size: 13px;}
#gridcontainer .griditemleft{float: left; width: 278px; margin: 0 40px 40px 0;}
#gridcontainer .griditemright{float: left; width: 278px;}
#gridcontainer .postimage{margin: 0 0 10px 0;}

Any help would be greatly appreciated.

Cheers,

Dan