grid template

grid css

by jpeter06

HTML

<div class="w100h100 grid2x1 bg-dark text-white">
    <div class="w100h100OH red gridDefault grid6000">
        <div class="w100h100OH green resumen">resumen</div>
        <div class="w100h100OH red mapa">mapa</div>
        <div class="w100h100OH yellow h24">h24</div>
        <div class="w100h100OH red h1">h1</div>
        <div class="w100h100OH blue ccaa">ccaa</div>
    </div>
    <div class="red flexg1 grid4x4">
        <div class="w100h100OH green 2pos1">2pos1 </div>
        <div class="w100h100OH green 2pos2">2pos2</div>
        <div class="w100h100OH red 2pos3">2pos3</div>
        <div class="w100h100OH blue 2pos4">2pos4</div>
    </div>
</div>

SCSS

html, body{
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  box-sizing: border-box;
  background-color: black;
  color:red;
  overflow-x: hidden;
  overflow-y: hidden;
}
html {overflow-y:hidden;}
body {overflow-y:auto;}
   
.grid2x1{
    display: grid;
    grid-auto-rows: 100vh;
    grid-template-columns: repeat(auto-fit, minmax( 350px, 1fr));
}

.grid4x4{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.w100h100OH{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
    margin:0px;
    padding:0px;
}

.w100h100{
    width:100%;
    height:100%;
    position:relative;
    margin:0px;
    padding:0px;
}

.red{    background:rgb(12, 12, 12);}
.yellow{background:rgb(24, 24, 24);}
.green{  background:rgb(32, 32, 32);}
.blue{ background:rgb(44, 44, 44);}

.resumen{ grid-area: resumen;}
.mapa{ grid-area: mapa;}
.h24{ grid-area: h24;}
.h1{ grid-area: h1;}
.ccaa{ grid-area: ccaa;}

.gridDefault{
    display: grid;
    grid-template-columns:3fr 1fr  2fr;
    grid-template-rows:   6fr 2fr  4fr;
    grid-template-areas: "resumen mapa  mapa"
                         "h24     h24   h1"
                         "ccaa    ccaa  ccaa";
}

@media screen and (min-width: 900px){
    .gridDefault.grid6000{
        grid-template-columns:  2fr  1fr  3fr ;
        grid-template-rows:     1fr  1fr  1fr ;

        grid-template-areas: "resumen resumen mapa"
                             "h24     h24     mapa"
                             "h1      ccaa    ccaa";
    }
}