WordPress page template for a post thumbnail grid

wordpress-post-thumbnail-grid-style.css

/* Post Thumbnail Grid */

.gridcontainer h2 a{color: #333; font-size: 13px;}
.gridcontainer .griditemleft{float: left; width: 150px; margin: 0 30px 20px 0;}
.gridcontainer .griditemright{float: left; width: 150px;}
.gridcontainer .postimage{margin: 0 0 5px 0;}
.gridcontainer .postimage-title {text-align: center;}

wordpress-post-thumbnail-grid.php

<?php
/*
Template Name: Thumbnails
*/
?>
<?php get_header(); ?>

<div class="gridcontainer">

<h1 class="entry-title"><?php the_title(); ?></h1>

<?php

// Grid Parameters
$counter = 1; // Start the counter
$grids = 5; // Grids per row
$titlelength = 20; // Length of the post titles shown below the thumbnails

// The Query
$args=array (
	'post_type' => 'post',
	'posts_per_page' => -1
	);
$the_query = new WP_Query($args);

// The Loop
while ( $the_query->have_posts() ) :
	$the_query->the_post();

// Show all columns except the right hand side column
if($counter != $grids) :
?>
<div class="griditemleft">
	<div class="postimage">
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
	</div><!-- .postimage -->
	<h2 class="postimage-title">
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
		<?php if (mb_strlen($post->post_title) > $titlelength)
			{ echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
		else { the_title(); } ?>
		</a>
	</h2>
</div><!-- .griditemleft -->
<?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(); ?></a>
	</div><!-- .postimage -->
	<h2 class="postimage-title">
		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
		<?php if (mb_strlen($post->post_title) > $titlelength)
			{ echo mb_substr(the_title($before = '', $after = '', FALSE), 0, $titlelength) . ' ...'; }
		else { the_title(); } ?>
		</a>
	</h2>
</div><!-- .griditemright -->

<div class="clear"></div>
<?php
$counter = 0;
endif;
$counter++;
endwhile;
wp_reset_postdata();
?>

</div><!-- .gridcontainer -->

<?php get_footer(); ?>

After the euphoria of getting the grid to display, I spent the better part of the day trying to (a) center the images within the "gridcontainer", (b) making the grid responsive and (c) getting the pagination navigation to take me beyond the initial page. I've decided to take a break until tomorrow.

This css partly formats the 3-column grid table, shown here on a tablet that folded each third article to the next line:

.gridcontainer { display: grid; grid-template-columns: repeat (auto-fit, minmax(400px, 1fr)); }

And this code snippet at the end of the while loop gives me the page links and I assume it's working since it shows that I have 68 pages with 21 items each:

the_posts_pagination(array( 'type' =>'list', 'prev_text'=>'Prev', 'next_text'=>'Next'));

Hopefully I'll have a working example to show soon.

Adding 'paged' => get_query_var( 'paged' ) to the query array solved my pagination issue.

Bootstrap also seems like a shortcut alternative.