Blog Grid Layout – Pinterest Masonry Style



body.blog{max-width:70vw;margin-left:auto;margin-right:auto;}

body.blog .site-main, body.archive .site-main{-moz-column-count:4;-webkit-column-count:4;column-count:4;-moz-column-gap:1em;-webkit-column-gap:1em;column-gap:1em;}
 
body.blog article, body.archive article{background-color:#eee;display:inline-block;margin:0 0 1em;padding:1em;width:100%;border:2px solid red;}
 
body.archive .archive-header, body.blog .paging-navigation, body.archive .paging-navigation{background-color:#ffffff;-webkit-column-span:all;column-span:all;}

.read-more{display:flex;justify-content:center;margin-top:1.5em;background:pink;}

a.read-more{text-decoration:none;}

.comment-navigation .nav-links,.posts-navigation .nav-links,.post-navigation .nav-links{column-span:all;}

@media only screen and (max-width : 1024px){
body.blog .site-main,body.archive .site-main{-moz-column-count:3;-webkit-column-count:3;column-count:3;}
}
 
@media only screen and (max-device-width : 1024px) and (orientation : portrait){
body.blog .site-main,body.archive .site-main{-moz-column-count:2;-webkit-column-count:2;column-count:2;}
}
 
@media only screen and (max-width : 768px){
body.blog .site-main,body.archive .site-main{-moz-column-count:2;-webkit-column-count:2;column-count:2;}
}
 
@media only screen and (max-width : 480px){
body.blog .site-main,body.archive .site-main{-moz-column-count:1;-webkit-column-count:1;column-count:1;}
}