The latest articles on DEV Community by stewart pringle (@stewypringle). https://dev.to/stewypringle https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F241371%2F061f42b1-e7ff-41b1-a83b-ee539dec29c7.jpg https://dev.to/stewypringle en stewart pringle Wed, 02 Oct 2019 20:11:00 +0000 https://dev.to/stewypringle/css-grid-layout-2jf5 https://dev.to/stewypringle/css-grid-layout-2jf5 <p>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.</p> testing the grid<br> <br> .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 &gt; 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; } } <p>Next Day shipping on orders placed before 3pm Monday to Friday - UK Mainland. Need Help? 07923376141</p> <h1>Thank you for your patience, our site is undergoing moderation. We will be up and running shortly</h1> <p>nav</p> <p>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.</p> <p>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.</p> <p>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.</p> <p>aside</p> <p>footer</p>