Skip to content

Instantly share code, notes, and snippets.

@fleeting
Created September 30, 2019 16:55
Show Gist options
  • Save fleeting/721d61dbe0557599132cbf8c12c34ade to your computer and use it in GitHub Desktop.
Save fleeting/721d61dbe0557599132cbf8c12c34ade to your computer and use it in GitHub Desktop.
.grid, .grid-flex {
&.grid-gutter {
margin-bottom: 50px;
}
}
.grid {
display: grid;
grid-gap: 25px;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
> .grid-cell {
:last-child {
margin-bottom: 0;
}
&.horizontal-left {
justify-self: start;
}
&.horizontal-center {
justify-self: center;
}
&.horizontal-right {
justify-self: end;
}
&.vertical-top {
align-self: start;
}
&.vertical-center {
align-self: center;
}
&.vertical-bottom {
align-self: end;
}
&.row-span-2 {
grid-row: span 2;
}
@for $i from 1 to 12 {
&.span-$i {
grid-column: span $i;
}
}
}
&.grid-spacing {
margin-bottom: 30px;
}
&.gap-none {
grid-gap: 0;
}
&.gap-small {
grid-gap: 20px;
}
&.gap-large {
grid-gap: 40px;
}
&.horizontal-left {
justify-content: start;
}
&.horizontal-center {
justify-content: center;
}
&.horizontal-right {
justify-content: end;
}
&.vertical-top {
align-content: start;
}
&.vertical-center {
align-content: center;
}
&.vertical-bottom {
align-content: end;
}
&.horizontal-items-left {
justify-items: start;
}
&.horizontal-items-center {
justify-items: center;
}
&.horizontal-items-right {
justify-items: end;
}
&.vertical-items-top {
align-items: start;
}
&.vertical-items-center {
align-items: center;
}
&.vertical-items-bottom {
align-items: end;
}
@for $i from 1 to 12 {
&.columns-$i {
grid-template-columns: repeat($i, 1fr);
}
}
@media <=map(bp, desktop) {
&.desktop-columns-1 {
grid-template-columns: repeat(1, 1fr);
}
&.desktop-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
}
@media <=map(bp, mobile) {
&.mobile-columns-1 {
grid-template-columns: repeat(1, 1fr);
> .grid-cell[class*=span-] {
grid-column: span 1;
}
}
&.mobile-columns-2 {
grid-template-columns: repeat(2, 1fr);
}
}
}
.grid-flex {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-bottom: -30px;
margin-left: -15px;
> .grid-cell {
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
:last-child {
margin-bottom: 0;
}
&.cell-flex {
display: flex;
}
&.horizontal-left {
justify-self: start;
}
&.horizontal-center {
justify-self: center;
}
&.horizontal-right {
justify-self: end;
}
&.vertical-top {
align-self: start;
}
&.vertical-center {
align-self: center;
}
&.vertical-bottom {
align-self: end;
}
}
&.gap-small {
margin-right: -10px;
margin-bottom: -20px;
margin-left: -10px;
> .grid-cell {
padding-right: 10px;
padding-bottom: 20px;
padding-left: 10px;
}
}
&.gap-large {
margin-right: -30px;
margin-bottom: -60px;
margin-left: -30px;
> .grid-cell {
padding-right: 30px;
padding-bottom: 60px;
padding-left: 30px;
}
}
&.gap-huge {
margin-right: -40px;
margin-bottom: -80px;
margin-left: -40px;
> .grid-cell {
padding-right: 40px;
padding-bottom: 80px;
padding-left: 40px;
}
}
&.no-overflow {
&, &.gap-small, &.gap-large, &.gap-huge {
margin-right: 0;
margin-left: 0;
}
}
&.horizontal-left {
justify-content: flex-start;
}
&.horizontal-center {
justify-content: center;
}
&.horizontal-right {
justify-content: flex-end;
}
&.vertical-top {
align-content: flex-start;
}
&.vertical-center {
align-content: center;
}
&.vertical-bottom {
align-content: flex-end;
}
&.vertical-items-top {
align-items: flex-start;
}
&.vertical-items-center {
align-items: center;
}
&.vertical-items-bottom {
align-items: flex-end;
}
@for $i from 1 to 12 {
&.columns-$i > .grid-cell {
width: calc(100% / $i);
}
}
@for $i from 1 to 12 {
> .span-$i {
width: calc(100% / (12 / $i));
}
}
@media <=map(bp, mobile) {
&.mobile-columns-1 > .grid-cell {
width: calc(100% / 1);
}
&.mobile-columns-2 > .grid-cell {
width: calc(100% / 2);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment