
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
Some CSS Grid collections from codepen – https://codepen.io/search/collections/?q=css%20grid
Currently I’m doing a dummy project on WordPress and I was going through this article and this is an excellent article, thanks for making it available!