How to Create Responsive Grid Image Box in Blogger | Spider Blogging

 Hello Spider Bloggers, Today am going to share one useful code for all of you, which suits all most all theme and I know its much more helpful for all niches.

For Example If you have one site related to tech or android and want to share screenshot in post it is not possible without some extra codes, like WordPress blogger won't have that features, So I have brought this code to you Hope you find it good.

How to Create Responsive Grid Image Box in Blogger

Step to add this in your theme:

Step.1

Tips : If You are unable to find </b:if> you can place this code in before </head> tag with <style> css </style>

 /* Responsive Grid Image Box in Blogger */ 
.Blog .grid-image{display:flex;flex-wrap:wrap;align-items:flex-start;margin:30px 0}
.Blog .grid-image img, .Blog .scroll-image img{width:calc(33.333% - 10px);margin:0 15px 15px 0}
.Blog .grid-image img:nth-of-type(3n), .Blog .grid-image img:last-child, .Blog .scroll-image img:nth-of-type(3n), .Blog .scroll-image img:last-child{margin-right:0}
.Blog .grid-image img{width:calc(50% - 7.5px)}
.Blog .grid-image img:nth-of-type(2n){margin-right:0}
.Blog .grid-image img:nth-of-type(3n){margin-right:15px}

Step. 2

//Paste This code in Post HTML mode    
<div class="grid-image">
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
  <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
   <img alt="ScreenShots" class="lazy" data-src="#"src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" />
   

Tips : Repeat Codes to make more grid images.

Result: