Layout Mobile CSS ( css => grid-template-rows )

by Adi Jaya

HTML

<div class="main">

    <div class="main-header">
      <div class="content">
        <h3>Hello</h3>
      </div>
    </div>
    
    <div class="main-body">
      <div class="content">
      
      </div>
    </div>
    
    <div class="main-footer">
      <div class="d-grid-2">
        <button>HOME</button>
        <button>ABOUT</button>
      </div>
    </div>
    
</div>

CSS

body {
    margin: 0;
}

.main {
    margin: 0 auto;
    max-width: 320px;
    color: white;
    display: grid;
    grid-template-rows: 45% auto 30px;
    height: 100vh;
}



/* DEMO */
.main-header {
    background: #6808a5;
}

.main-body {
  	background: pink;
}

.main-footer {
  	background: brown;
}

/**/
.content {
    padding: 10px;
}

.d-grid-2 {
    display: grid;
    grid-template-columns: auto auto;
    height: 100%;
}

.d-grid-2 button {
    display: inline-block;
    height: 100%;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
}