WordPress and CSS Grid: Building a flexible listing template

Listing templates are every WordPress theme’s bread and butter. Every type of content needs to be displayed somehow and listing templates are the norm when it comes to showcasing content that falls within the same family, i.e. posts, pages, products, or any kind of other custom post types. We use them extensively here at CSSIgniter with a lot of options like headings, animations, post meta visibility, and more. Our main and most wanted option though is the column number setting, i.e. choosing in how many columns to split the cards each post is contained within. The figure above showcases how we lay out custom post types in a few of our most recent themes, Blockchain, Listee, and Løge.
In our HTML and CSS, we create our grid using Flexbox (we actually use our own version of the Bootstrap grid) and in this tutorial we’ll see how we can easily create a “CSS Grid Framework” with none other than the shiny new CSS Grid!
CSS Grid
We’ve talked about CSS Grid in our previous tutorial “Creating a simple WordPress blogging layout with CSS Grid and Flexbox“, and to sum up, CSS Grid is a new, powerful, and pragmatic solution CSS has to offer for authoring
Source: https://managewp.org/articles/17426/wordpress-and-css-grid-building-a-flexible-listing-template

source https://williechiu40.wordpress.com/2018/05/15/wordpress-and-css-grid-building-a-flexible-listing-template/