* {
        box-sizing: border-box;
}

.grid {
        display: grid;
        grid-template-areas: "topL top topR" "midL mid midR" "bttmL bttm bttmR";
        gap: 10px;
        max-height: calc(100vh - 20px);
        width: calc(100vw - 20px);
        position: fixed;
        z-index: 3;
}
      
.grid2 {
        display: grid;
        grid-template-areas: "topL top topR" "midL mid midR" "bttmL bttm bttmR";
        gap: 10px;
        max-height: calc(100vh - 20px);
        width: calc(100vw - 20px);
        position: fixed;
        z-index: 2;
}

.topR {
        grid-row: 1 / span 2;
        grid-column: 3 / span 1;
      }
      
      #holder {
        width: calc(33vw - 9px);
        height: calc(33vh - 12px);
        max-width: calc(33vw - 9px);
        max-height: calc(33vh - 12px);
        position: relative;
        margin: 0;
        
        /*border: 2px solid black;*/
      }
      
      #topRholder {
        width: calc(33vw - 9px);
        height: calc(66vh - 12px);
        max-width: calc(33vw - 9px);
        max-height: calc(66vh - 12px);
        position: relative;
        margin: 0;
        
        /*border: 2px solid black;*/
      }
      
      .footer {
        grid-area: footer;
        height: 10vh;
        width: 100vw;
        margin-top: 90vh;
        margin-left: -10px;
        position: fixed;
        z-index: 4;
      }

/*


<div class="grid">
      
      <div class="topL">
        <div id="holder">
        </div>
      </div>
      
      <div class="top">
        <div id="holder"></div>
      </div>
      
      <div class="topR">
        <div id="topRholder">
          <img src="" style="">
          <img src="" style="">
        </div>
      </div>
      
      
      <div class="midL">
        <div id="holder">
          <img src="" style="">
        </div>
      </div>
      
      <div class="mid" style="text-align: center;">
        <div id="holder"><img src=""></div>
      </div>
      
      
      <div class="bttmL" style="">
        <div id="holder">
          <img src="" style=""><br>
          <img src="" style="">
        </div>
      </div>
      
      <div class="bttm">
        <div id="holder"></div>
      </div>
      
      <div class="bttmR">
        <div id="holder" style="text-align: center;">
          <img src="" style="">
        </div>
      </div>
      
      
    </div>
    
    
    
    
    <div class="grid2">
      
      <div class="topL">
        <div id="holder">
        </div>
      </div>
      
      <div class="top">
        <div id="holder"></div>
      </div>
      
      <div class="topR">
        <div id="topRholder">
          <img src="">
        </div>
      </div>
      
      
      <div class="midL">
        <div id="holder"></div>
      </div>
      
      <div class="mid" style="">
        <div id="holder"><img src="" style=""></div>
      </div>
      
      
      <div class="bttmL">
        <div id="holder">
        </div>
      </div>
      
      <div class="bttm">
        <div id="holder"></div>
      </div>
      
      <div class="bttmR">
        <div id="holder"></div>
      </div>
      
      
    </div><!--grid2 -->
    
    
    <div class="footer">
        <img src="" style="">
    </div>
    
    
*/