171 lines
7.3 KiB
SCSS
171 lines
7.3 KiB
SCSS
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
|
|
&.grid-gutter { grid-gap: $gutter; }
|
|
&.grid-gutter-lg { grid-gap: $gutter * 2; }
|
|
|
|
&.grid-start { align-items: start; }
|
|
&.grid-center { align-items: center; }
|
|
&.grid-end { align-items: end; }
|
|
|
|
&.col-100 { grid-template-columns: 1fr; }
|
|
&.col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.col-33 { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.col-50 { grid-template-columns: 1fr 1fr; }
|
|
&.col-70-30 { grid-template-columns: 2fr 1fr; }
|
|
&.col-30-70 { grid-template-columns: 1fr 2fr; }
|
|
&.col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.col-25-75 { grid-template-columns: 1fr 3fr; }
|
|
&.col-75-25 { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
|
|
//////////////////////////
|
|
// desktop first classes
|
|
//////////////////////////
|
|
|
|
@media screen and (max-width: #{$screen-desktop-lg - 1}) {
|
|
.grid {
|
|
&.col-100-lg { grid-template-columns: 1fr; }
|
|
&.col-20-lg { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.col-25-lg { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.col-33-lg { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.col-50-lg { grid-template-columns: 1fr 1fr; }
|
|
&.col-70-30-lg { grid-template-columns: 2fr 1fr; }
|
|
&.col-30-70-lg { grid-template-columns: 1fr 2fr; }
|
|
&.col-50-25-25-lg { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.col-25-50-25-lg { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.col-25-25-50-lg { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.col-25-75-lg { grid-template-columns: 1fr 3fr; }
|
|
&.col-75-25-lg { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: #{$screen-desktop - 1}) {
|
|
.grid {
|
|
&.col-100-md { grid-template-columns: 1fr; }
|
|
&.col-20-md { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.col-25-md { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.col-33-md { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.col-50-md { grid-template-columns: 1fr 1fr; }
|
|
&.col-70-30-md { grid-template-columns: 2fr 1fr; }
|
|
&.col-30-70-md { grid-template-columns: 1fr 2fr; }
|
|
&.col-50-25-25-md { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.col-25-50-25-md { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.col-25-25-50-md { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.col-25-75-md { grid-template-columns: 1fr 3fr; }
|
|
&.col-75-25-md { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: #{$screen-tablet-lg - 1}) {
|
|
.grid {
|
|
&.col-100-sm { grid-template-columns: 1fr; }
|
|
&.col-20-sm { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.col-25-sm { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.col-33-sm { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.col-50-sm { grid-template-columns: 1fr 1fr; }
|
|
&.col-70-30-sm { grid-template-columns: 2fr 1fr; }
|
|
&.col-30-70-sm { grid-template-columns: 1fr 2fr; }
|
|
&.col-50-25-25-sm { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.col-25-50-25-sm { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.col-25-25-50-sm { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.col-25-75-sm { grid-template-columns: 1fr 3fr; }
|
|
&.col-75-25-sm { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: #{$screen-tablet - 1}) {
|
|
.grid {
|
|
&.col-100-xs { grid-template-columns: 1fr; }
|
|
&.col-20-xs { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.col-25-xs { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.col-33-xs { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.col-50-xs { grid-template-columns: 1fr 1fr; }
|
|
&.col-70-30-xs { grid-template-columns: 2fr 1fr; }
|
|
&.col-30-70-xs { grid-template-columns: 1fr 2fr; }
|
|
&.col-50-25-25-xs { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.col-25-50-25-xs { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.col-25-25-50-xs { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.col-25-75-xs { grid-template-columns: 1fr 3fr; }
|
|
&.col-75-25-xs { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
|
|
//////////////////////////
|
|
// mobile first classes
|
|
//////////////////////////
|
|
|
|
|
|
@media screen and (min-width: #{$screen-tablet}) {
|
|
.grid {
|
|
&.sm-col-100 { grid-template-columns: 1fr; }
|
|
&.sm-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.sm-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.sm-col-33 { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.sm-col-50 { grid-template-columns: 1fr 1fr; }
|
|
&.sm-col-70-30 { grid-template-columns: 2fr 1fr; }
|
|
&.sm-col-30-70 { grid-template-columns: 1fr 2fr; }
|
|
&.sm-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.sm-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.sm-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.sm-col-25-75 { grid-template-columns: 1fr 3fr; }
|
|
&.sm-col-75-25 { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-tablet-lg}) {
|
|
.grid {
|
|
&.md-col-100 { grid-template-columns: 1fr; }
|
|
&.md-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.md-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.md-col-33 { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.md-col-50 { grid-template-columns: 1fr 1fr; }
|
|
&.md-col-70-30 { grid-template-columns: 2fr 1fr; }
|
|
&.md-col-30-70 { grid-template-columns: 1fr 2fr; }
|
|
&.md-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.md-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.md-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.md-col-25-75 { grid-template-columns: 1fr 3fr; }
|
|
&.md-col-75-25 { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-desktop}) {
|
|
.grid {
|
|
&.lg-col-100 { grid-template-columns: 1fr; }
|
|
&.lg-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.lg-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.lg-col-33 { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.lg-col-50 { grid-template-columns: 1fr 1fr; }
|
|
&.lg-col-70-30 { grid-template-columns: 2fr 1fr; }
|
|
&.lg-col-30-70 { grid-template-columns: 1fr 2fr; }
|
|
&.lg-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.lg-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.lg-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.lg-col-25-75 { grid-template-columns: 1fr 3fr; }
|
|
&.lg-col-75-25 { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: #{$screen-desktop-lg}) {
|
|
.grid {
|
|
&.xl-col-100 { grid-template-columns: 1fr; }
|
|
&.xl-col-20 { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
|
|
&.xl-col-25 { grid-template-columns: 1fr 1fr 1fr 1fr; }
|
|
&.xl-col-33 { grid-template-columns: 1fr 1fr 1fr; }
|
|
&.xl-col-50 { grid-template-columns: 1fr 1fr; }
|
|
&.xl-col-70-30 { grid-template-columns: 2fr 1fr; }
|
|
&.xl-col-30-70 { grid-template-columns: 1fr 2fr; }
|
|
&.xl-col-50-25-25 { grid-template-columns: 2fr 1fr 1fr; }
|
|
&.xl-col-25-50-25 { grid-template-columns: 1fr 2fr 1fr; }
|
|
&.xl-col-25-25-50 { grid-template-columns: 1fr 1fr 2fr; }
|
|
&.xl-col-25-75 { grid-template-columns: 1fr 3fr; }
|
|
&.xl-col-75-25 { grid-template-columns: 3fr 1fr; }
|
|
}
|
|
}
|