Only CSS Responsive Grid Style Box
Code Setup Guideline: Go to Blogger Template Section > Edit HTML
- Now find <b:skin><![CDATA[
- Paste the given css code.
/* Grid widget section start */
.card {
background-color: white;
color: #026fa4;
padding: 1rem;
border-radius: 4px;
box-shadow: 0 10px 20px 0 rgba(30,30,30,.07);
border: 1px solid #026fa4;
margin-top: 10px;
}
.card:hover {
border: 1px solid blue;
background-color:none;
}
.cards {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
}
/* Screen larger than 600px? 2 column */
@media (min-width: 600px) {
.cards { grid-template-columns: repeat(1, 1fr); }
}
/* Screen larger than 900px? 3 columns */
@media (min-width: 900px) {
.cards { grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 1000px) {
.cards { grid-template-columns: repeat(2, 1fr); }
}
/* Screen larger than 900px? 3 columns */
@media (min-width: 1100px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
<div class='cards'>
<div class='card'>
<b:section class='home-7' id='home-7'/>
</div>
<div class='card'>
<b:section class='home-8' id='home-8'/>
</div>
<div class='card'>
<b:section class='home-9' id='home-9'/>
</div>
<div class='card'>
<b:section class='home-10' id='home-10'/>
</div>
<div class='card'>
<b:section class='home-11' id='home-11'/>
</div>
<div class='card'>
<b:section class='home-12' id='home-12'/>
</div>
</div>
Live Demo