Image Grid on a static Page

I am making a portfolio website using Pictorico. Each blog post is a project, containing a gallery, video, descriptive information, etc.

I have been trying to make a number of Pages, each dedicated to a category of work. Each Page will contain a featured image, an explanation of the work type, possibly a video or a few other photos.

I would like such pages to include, below the content just mentioned, a post-grid identical to the home page’s grid, but filtered for posts belonging only to the category in question.

I have been following some guidelines found here in the codex, about page templates. I have succeeded in making a custom template that adds a filtered list of posts (a page using that template is linked below) but I am at a loss as to how I can get those posts to appear like the home page grid rather than the messed up look they have now.

My main question is how to implement the grid in this context (my template code is below.

At first I was trying to use a custom field on the page to dictate the category to filter, but I can’t figure out how to add a custom field to a page, so I am simply coding the category into the template, which will work for the handful of categories I use, so that’s a secondary question.

I’m pretty shaky on the php stuff, but I got this far…

Any help would be greatly appreciated.

The site is here.
The Page I am experimenting with is here.

Here’s my template:

<?php
/*
Template Name: Category Page 3
*/

/**
 * The template for displaying category pages.
 *
 * This template is an experiment trying to incorporate page of posts.
 *
 * @package Pictorico
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			<?php while ( have_posts() ) : the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>

				<?php
					// If comments are open or we have at least one comment, load up the comment template
					if ( comments_open() || '0' != get_comments_number() ) :
						comments_template();
					endif;
				?>

			<?php endwhile; // end of the loop. ?>
<p>this is the end of the category intro</p>
<!-- here we go... -->
			<?php 

	        $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

	        $args = array(
	            // Change these category SLUGS to suit your use.
	            'category_name' => 'architectural-optics',
	            'paged' => $paged
	        );

	        $list_of_posts = new WP_Query( $args );
            ?>

            <?php if ( $list_of_posts->have_posts() ) : ?>

				<?php /* Start the Loop */ ?>
				<?php while ( $list_of_posts->have_posts() ) : $list_of_posts->the_post(); ?>

					<?php // Display content of posts ?>
					<?php get_template_part( 'content', 'home' ); ?>

				<?php endwhile; ?>

			<?php endif; ?>

<!-- ok -->

				<?php echo "KLANG!!" ; ?>
		</main><!-- #main -->
	</div><!-- #primary -->

<?php get_footer(); ?>