Skip to content

Instantly share code, notes, and snippets.

@tzkmx
Created November 25, 2020 06:23
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tzkmx/e27a4b5ffc197920a4353c98c49317ba to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
@mixin full-height {
height: 100%;
margin: 0;
}
@mixin flex-center-x-y {
display: flex;
justify-content: center;
align-items: center;
}
html, body {
@include full-height;
}
.HomeTeaser {
@include full-height;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 0px 0px;
@media all and (-ms-high-contrast: none) {
& {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 2fr 1fr;
}
}
.top {
@include flex-center-x-y;
background-color: magenta;
grid-column: 1/4;
}
.left, .middle, .right {
@include flex-center-x-y;
grid-row: 2/3;
}
.left {
background-color: #bb4444;
grid-column: 1/2;
}
.middle {
background-color: #44bb44;
grid-column: 2/3;
}
.right {
background-color: #4444bb;
grid-column: 3/4;
}
}
html, body {
height: 100%;
margin: 0;
}
.HomeTeaser {
height: 100%;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 2fr 1fr;
gap: 0px 0px;
}
@media all and (-ms-high-contrast: none) {
.HomeTeaser {
display: -ms-grid;
-ms-grid-columns: 1fr 1fr 1fr;
-ms-grid-rows: 2fr 1fr;
}
}
.HomeTeaser .top {
display: flex;
justify-content: center;
align-items: center;
background-color: magenta;
grid-column: 1/4;
}
.HomeTeaser .left, .HomeTeaser .middle, .HomeTeaser .right {
display: flex;
justify-content: center;
align-items: center;
grid-row: 2/3;
}
.HomeTeaser .left {
background-color: #bb4444;
grid-column: 1/2;
}
.HomeTeaser .middle {
background-color: #44bb44;
grid-column: 2/3;
}
.HomeTeaser .right {
background-color: #4444bb;
grid-column: 3/4;
}
{
"sass": {
"compiler": "dart-sass/1.26.11",
"extensions": {},
"syntax": "SCSS",
"outputStyle": "expanded"
},
"autoprefixer": false
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment