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:

<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(); ?>

Here is the CSS for the grid:

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

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
    //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(); ?>

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