Skip to content

Instantly share code, notes, and snippets.

@lizkaraffa

lizkaraffa/_mixins.scss

Last active Aug 13, 2020
Embed
What would you like to do?
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
You can’t perform that action at this time.