<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="header">Header</div> <div class="menu">Menu</div> <div class="content">Content</div> <div class="footer">Footer</div> <div class="header">Header</div> <div class="menu">Menu</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>

html, body { height: 100vh; } .wrapper{ height: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; } .header{ background-color: aqua; } .menu{ background-color: blue; } .content{ background-color: azure; } .footer{ background-color: black; color: #fff; }