Mixin Partial
@mixin gridSection { | |
display: grid; | |
grid-template-columns: $size__mobile-grid; | |
@include media(tablet) { | |
grid-template-columns: $size__tablet-grid; | |
} | |
@include media(desktop) { | |
grid-template-columns: $size__desktop-grid; | |
max-width: $size__max-site-width; | |
width: 100%; | |
margin-right: auto; | |
margin-left: auto; | |
} | |
} | |
@mixin regularContentMaxWidth() { | |
grid-column: 2 / -2; | |
@include media(desktop) { | |
grid-column: 4 / -4; | |
} | |
} | |
@mixin wideContentMaxWidth() { | |
grid-column: 2 / -2; | |
// Optional to have two wide width views. | |
// I normally don't use this second option | |
@include media(desktop) { | |
grid-column: 3 / -3; | |
} | |
} | |
@mixin fullContentMaxWidth() { | |
grid-column: 1 / -1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment