Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .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);
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement