SCSS

by ndaian

HTML

<div class="component-container">

  <div class="grid-container-1">
    <div class="grid-item grid-header">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-nav">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-left">
      <button type="button">Click Me!</button>
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-content-right">
      <button type="button">Click Me!</button>
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
    <div class="grid-item grid-footer">
      One<br>Two<br>Three<br>Four<br>Five<br>Six<br>Seven<br>Eight<br>Nine<br>Ten<br>
    </div>
  </div>

  <div class="grid-container-2">
    Lorem Ipsum
  </div>
</div>

SCSS

.component-container {
   width: 800px;
    height: 200px;
    background-color: lightyellow;
    border: 1px solid red;
    padding: 10px;
    overflow: hidden;

/*      display: grid;
         grid-template-columns: 1fr 1fr;
         grid-gap: 10px;
      */     
    .grid-container-1 {
        display: grid;
        grid-template-columns: 150px 1fr 1fr;
        grid-template-rows: 50px 1fr 50px;
        grid-gap: 3px;
        padding: 3px;
        height: 100%;
        width: 100%;
        background-color: #2196F3;

        .grid-item {
            background-color: rgba(255, 255, 255, 0.8);
            border: 1px solid darkblue;
            overflow: auto;
        }

        .grid-header {
            grid-column: 1 / span 3;
            grid-row: 1;
        }

        .grid-nav {
            grid-column: 1;
            grid-row: 2 / span 1;
        }

        .grid-content-left {
            grid-column: 2;
            grid-row: 2;
        }

        .grid-content-right {
            grid-column: 3;
            grid-row: 2;
        }

        .grid-footer {
            grid-column: 1 / span 3;
            grid-row: 3;
        }
    }

    .grid-container-2 {
        padding: 3px;
        height: 100%;
        width: 100%;
        background-color: rgb(177, 243, 204);
    }
}

button {
    margin: 2px;
    width: 500px;
}