Creating a simple WordPress blogging layout with CSS Grid and Flexbox

CSS has come a long, long way and throughout the very recent years has steadily matured to become more than a simple styling specification which required hacks for many complex (or simple) things. With constant improvements like the introduction of e.g. flexbox, custom properties, and more, the design developer’s life has become dramatically easier. One of the most recent additions into the language’s specification is CSS Grid, which aims to remove any layout limitations the language had before (even by flexbox). CSS Grid is designed to be the most powerful layout system CSS has to offer. Unlike flexbox, which is mostly a one-dimensional positioning system with limited two-dimensional support, CSS Grid handles both dimensions (i.e. rows and columns) with greater versatility.
As CSS Grid is extremely complex (it introduces more than a dozen new properties with near infinite combinations) this post will focus on a general overview of a basic blogging layout, much like the ones we usually see on WordPress, explore some of the required properties to create this layout, and make an attempt to distinguish layout responsibilities between CSS Grid and flexbox.
The desired blogging
Source: https://managewp.org/articles/16770/creating-a-simple-wordpress-blogging-layout-with-css-grid-and-flexbox

source https://williechiu40.wordpress.com/2017/12/08/creating-a-simple-wordpress-blogging-layout-with-css-grid-and-flexbox/