WordPress blog page template with CSS Grid

CSS Grid is a very easy way of defining page layouts in two dimensions. I designed my site almost an year and half ago using Bootstrap. I have been planning to re-do the entire site using CSS grid, but it has been very difficult to set aside time to work on my site. So, finally this past weekend, I spent some time to re-do my blog page template using CSS grid.  It was much easier than I expected.

Why do I want to change from the bootstrap (most popular) framework to CSS grid? CSS grid is a much simpler way of achieving the same layout. It also gives you more flexibility with responsive sites. Here is a very nice article that explains this difference between Bootstrap and CSS Grid – https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

So, coming back to my blog page, I wanted a full width responsive page with 3 posts across without a sidebar.  You can see the responsive grid layout here.

Here is the code to display my posts in a grid:

[php]
<section class="blog_posts">
<?php if ( have_posts() ) :
// Start the loop.
while ( have_posts() ) : the_post();
?>
<article class="single_post">
<div class="featured_image">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( ‘full’, array( ‘class’ => ‘bck_img’ ) );
}
?>
</div>
<div class="title">
<h2 class="page-title blog screen-reader-text"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
</article><!–end of single_post–>
<?php
// End the loop.
endwhile;

endif;
?>
</section><!–end of blog_posts–>
<?php posts_nav_link(); ?>
[/php]

Here is the CSS for the grid:

[css]
.blog_posts {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
grid-gap: 30px;
}
[/css]

grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); -> this makes the grid responsive. I have included a few links at the bottom of the post that explains responsive css grids.

Here is the entire blog page template.

[php]
<?php
//Template: Blog Page
?>
<?php get_header(); ?>

<div class="container">
<section class="blog_posts">
<?php if ( have_posts() ) :
// Start the loop.
while ( have_posts() ) : the_post();
?>
<article class="single_post">
<div class="featured_image">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( ‘full’, array( ‘class’ => ‘bck_img’ ) );
}
?>
</div>
<div class="title">
<h2 class="page-title blog screen-reader-text"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</div>
</article><!–end of single_post–>
<?php
// End the loop.
endwhile;

endif;
?>
</section><!–end of blog_posts–>
<?php posts_nav_link(); ?>

</div><!–end of container–>
<?php get_footer(); ?>
[/php]

Here are some links for learning CSS grid.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

A complete guide to CSS grid

Some CSS Grid collections from codepen – https://codepen.io/search/collections/?q=css%20grid