CSS Grid layout
Published: 2019-10-02 20:11:00

Hi guys, i'm having an headache trying to get my CSS grid to auto-fit the contents inside a sub-grid.  However, my content spills under the footer using the following code.

<html>

<head>

<title>testing the grid</title>
<meta name = "keywords" content = "test the grid, test">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">





<style>
.container{
 display:grid;
  grid-template-areas: 	


  
  
    "header header header"
     "logo logo logo"
    "nav contents aside"  
    "footer footer footer";




	
	grid-template-columns: 143px auto 143px;
	overflow:hidden;
	grid-template-rows: 40px auto 680px ;  

 



  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;




}

.header{
	grid-area:header;
	background-color:#ef9505;
	color:#fff;
	height:30px;
	padding:3px;
	text-align:center;
	padding-top:10px;
	}



	
.nav{
	grid-area:nav;
	background-color:pink;
	}



	
.content{
	grid-area:contents;
	background-color:gold;
	
	}
	
.aside{
	grid-area:aside;
	background-color:brown;
	width:160hv;
	}



	
.footer{
	grid-area:footer;
	background-color:darkslategrey;
	height:250px;
	position:relative;
	}





.logo{
grid-area:logo;
	background-color:green;
	height:100px;
	text-align:center;
	color:#fff;
	}




.inner-grid{
	display:inline-grid;
	border: solid thick green;
	grid-padding: 2px;
	grid-template-rows: repeat(auto-fit, minmax(250px, 1fr))
        grid-template-columns: 1fr auto 1fr;
        background-color:red;
        max-width:510px;
        margin-left:4px;
	grid-gap:5px;
	

}




.inner-grid > div{
	background-color:white;
	
	
	}




	
	.body{
		margin-top:0px;
		margin-bottom:0px;
		margin-left:0px;
		margin-right:0px;
		
		}



		/* Stack the layout on small devices/viewports. */
@media all and (max-width: 475px) {
  body { 
    grid-template-areas: 
      "header"
      "logo"
      "nav"
      "contents"
      "aside"
      "footer";
       grid-template-rows: 80px 1fr 70px 1fr 70px;  
       grid-template-columns: 1fr;
       background-color:black;
 }
 }
	
</style>
</head>


<div class ="body">
<div class = "container">


<div class = "header">Next Day shipping on orders placed before 3pm Monday to Friday - UK Mainland. Need Help? 07923376141</div>

<div class = "logo"><h1>Thank you for your patience, our site is undergoing moderation.  We will be up and running shortly</h1></div>

<div class ="nav">nav</div>



<div class = "content">
<div class = "inner-grid">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>



<div class = "inner-grid">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>




<div class = "inner-grid">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>






<div class = "aside">aside</div>


<div class = "footer">footer</div>








</div>


</body>


</html>


Please........ any comments would be gratefully appreciated.