In this post we are going to learn how to create Responsive Service Grid With 3 Columns using css Designed by Katherine Kato.
Service Grid
HTML
[code language=”html”]
<section>
<h3>Our Services</h3>
<p class="section-lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="services-grid">
<div class="service service1">
<i class="ti-bar-chart"></i>
<h4>Wealth Management</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="cta">Read More <span class="ti-angle-right"></a>
</div>
<div class="service service2">
<i class="ti-light-bulb"></i>
<h4>Financial Planning</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="cta">Read More <span class="ti-angle-right"></a>
</div>
<div class="service service3">
<i class="ti-money"></i>
<h4>Investment Banking</h4>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="cta">Read more <span class="ti-angle-right"></span></a>
</div>
</div>
</section>
[/code]
CSS / SCSS
[code language=”css”]
@import url(‘https://fonts.googleapis.com/css?family=Montserrat:600|Open+Sans’);
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: ‘Open Sans’, sans-serif;
margin: 0;
background: #fff;
color: #999;
}
a {
text-decoration: none;
margin: 1rem 0;
font-weight: 600;
text-transform: uppercase;
font-size: 0.8125rem;
letter-spacing: 1px;
}
p {
font-size: 0.9rem;
margin: 1rem 0;
line-height: 1.5;
}
section {
max-width: 1000px;
margin: 0 auto;
text-align: center;
padding: 30px;
}
h3 {
font-family: ‘Montserrat’, sans-serif;
font-weight: 600;
color: #333;
font-size: 1.825rem;
margin: 1.3rem 0;
}
.section-lead {
max-width: 600px;
margin: 1rem auto 1.5rem;
}
.service a {
color: #5b7abb;
display: block;
}
.service h4 {
font-family: ‘Montserrat’, sans-serif;
font-weight: 600;
color: #56ceba;
font-size: 1.3rem;
margin: 1rem 0 0.6rem;
}
.services-grid {
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
}
.service {
background: #fff;
margin: 20px;
padding: 20px;
border-radius: 4px;
text-align: center;
-webkit-box-flex: 1;
flex: 1;
display: -webkit-box;
display: flex;
flex-wrap: wrap;
border: 2px solid #e7e7e7;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.service:hover {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}
.service i {
font-size: 3.45rem;
margin: 1rem 0;
}
.service1 i,
.service1 h4,
.service1 .cta {
color: #42b7ca;
}
.service1:hover {
border: 2px solid #42b7ca;
}
.service2 i,
.service2 h4,
.service2 .cta {
color: #425fca;
}
.service2:hover {
border: 2px solid #425fca;
}
.service3 i,
.service3 h4,
.service3 .cta {
color: #9c42ca;
}
.service3:hover {
border: 2px solid #9c42ca;
}
.service .cta span {
font-size: 0.6rem;
}
.service > * {
flex: 1 1 100%;
}
.service .cta {
align-self: flex-end;
}
@media all and (max-width:900px) {
.services-grid {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
}
[/code]
