How to set internal border lines on a CSS Grid layout

CSS Grid with Border Lines

@media (min-width: 768px) {
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr) ) ;
grid-gap: 0px;
}
}
.service-item {
padding: 3rem;
text-align: center;
border-top: 1px solid #dfdfdf;
}
@media (min-width: 768px) {
.service-item {
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
}
}

Omitting the Outer Borders for Tablet

@media (min-width: 768px) {
.service-item {
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
&:nth-child(-n+2) {
border-top: none;
}
&:nth-child(odd) {
border-left: none;
}
}
}

Omitting the Outer Borders for Desktop

@media (min-width: 992px) {
.service-item {
border-top: 1px solid #dfdfdf;
border-left: 1px solid #dfdfdf;
&:nth-child(-n+2) {
border-top: 1px solid #dfdfdf;
}
&:nth-child(odd) {
border-left: 1px solid #dfdfdf;
}
&:nth-child(-n+3) {
border-top: none;
}
&:first-child,
&:nth-child(3n+1) {
border-left: none;
}
}
}

Setting the lightsabers with SCSS

$red: #ff093c;
$blue: #21bbeb;
$purple: #af4ba4;
$green: #1dc887;
@mixin lightsaber($color) {
background-color: lighten( $color, 20% );
border: solid 3px $color;
border-radius: 5px;
}
h3 {
&:after {
margin: 12px auto 0;
width: 125px;
height: 5px;
background-color: #333;
display: block;
content: “”;
}
}
h3.red:after { @include lightsaber($red)}
h3.green:after { @include lightsaber($green)}
h3.purple:after { @include lightsaber($purple)}
h3.blue:after { @include lightsaber($blue)}

That’s about it

Product Design and Development Lead at The Motley Fool writing mostly about design and front-end development. Thx for reading.

Product Design and Development Lead at The Motley Fool writing mostly about design and front-end development. Thx for reading.