Generated by SassMeister.com.

input.scss

body {
  margin: 40px;
}
*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}
.box a {
  color: pink;
}

.box:nth-child(odd) {
  background-color: #ccc;
  color: #000;
}
.box:nth-child(odd) a {
  color: purple;
}
.wrapper {
  border: green solid 1px;
}


// stylelint-enable max-nesting-depth
@mixin magic-grid {
    @media screen and (min-width: 768px) {
        display: grid;
        grid-template-columns: repeat(12, 1fr);

        > *:first-child {
            grid-area: ft;
        }
        > *:last-child {
            grid-area: lt;
        }
    }
}



[data-layout~="6 6 grid"] {
    @include magic-grid;    
    grid-template-areas: "ft ft ft ft ft ft gap lt lt lt lt lt";
}

[data-layout="4 7 grid"] {
    @include magic-grid;    
    grid-template-areas: "ft ft ft ft   lt lt lt lt lt lt lt";
}

[data-layout="5 6 grid"] {
    @include magic-grid;    
    grid-template-areas: "ft ft ft ft ft gap lt lt lt lt lt lt";
}

// reversed
[data-layout="7 4 grid"] {
    @include magic-grid;    
    grid-template-areas: "lt lt lt lt   ft ft ft ft ft ft ft  ";
}

[data-layout="6 5 grid"] {
    @include magic-grid;    
    grid-template-areas: "lt lt lt lt lt  gap ft ft ft ft ft ft ";
}

markup.html

<div data-layout="6 5 grid">
  <div class="box box1 first"><a href="#">1</a></div>
  <div class="box box2 last"><a href="#">2</a></div>  
</div>

output.css

body {
  margin: 40px;
}

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.box {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
}

.box a {
  color: pink;
}

.box:nth-child(odd) {
  background-color: #ccc;
  color: #000;
}

.box:nth-child(odd) a {
  color: purple;
}

.wrapper {
  border: green solid 1px;
}

[data-layout~="6 6 grid"] {
  grid-template-areas: "ft ft ft ft ft ft gap lt lt lt lt lt";
}
@media screen and (min-width: 768px) {
  [data-layout~="6 6 grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  [data-layout~="6 6 grid"] > *:first-child {
    grid-area: ft;
  }
  [data-layout~="6 6 grid"] > *:last-child {
    grid-area: lt;
  }
}

[data-layout="4 7 grid"] {
  grid-template-areas: "ft ft ft ft   lt lt lt lt lt lt lt";
}
@media screen and (min-width: 768px) {
  [data-layout="4 7 grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  [data-layout="4 7 grid"] > *:first-child {
    grid-area: ft;
  }
  [data-layout="4 7 grid"] > *:last-child {
    grid-area: lt;
  }
}

[data-layout="5 6 grid"] {
  grid-template-areas: "ft ft ft ft ft gap lt lt lt lt lt lt";
}
@media screen and (min-width: 768px) {
  [data-layout="5 6 grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  [data-layout="5 6 grid"] > *:first-child {
    grid-area: ft;
  }
  [data-layout="5 6 grid"] > *:last-child {
    grid-area: lt;
  }
}

[data-layout="7 4 grid"] {
  grid-template-areas: "lt lt lt lt   ft ft ft ft ft ft ft  ";
}
@media screen and (min-width: 768px) {
  [data-layout="7 4 grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  [data-layout="7 4 grid"] > *:first-child {
    grid-area: ft;
  }
  [data-layout="7 4 grid"] > *:last-child {
    grid-area: lt;
  }
}

[data-layout="6 5 grid"] {
  grid-template-areas: "lt lt lt lt lt  gap ft ft ft ft ft ft ";
}
@media screen and (min-width: 768px) {
  [data-layout="6 5 grid"] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }
  [data-layout="6 5 grid"] > *:first-child {
    grid-area: ft;
  }
  [data-layout="6 5 grid"] > *:last-child {
    grid-area: lt;
  }
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}