You need to do so that Footer starts where the content ends.

That is, to make the grid behave like a table so that the new row starts where the maximum content on the previous row ends.

Problem

body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .footer { grid-area: footer; } .wrapper { display: grid; grid-gap: 10px; grid-template-columns: 120px 120px 120px; grid-template-areas: "....... header header" "sidebar content content" "footer footer footer"; background-color: #fff; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 10px; font-size: 150%; } .header, .footer { background-color: #999; } 
 <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content <br /> More content than we had before so this column is now quite tall.</div> <div class="box footer">Footer</div> </div>

    1 answer 1

     body { margin: 40px; } .sidebar { grid-area: sidebar; } .content { grid-area: content; } .header { grid-area: header; } .footer { grid-area: footer; } .wrapper { display: grid; grid-template-columns: 120px 120px 120px; grid-template-areas: "....... header header" "sidebar content content" "footer footer footer"; background-color: #fd1; color: #444; } .box { background-color: #444; color: #fff; border-radius: 5px; padding: 10px; font-size: 150%; } .header, .footer { background-color: #999; } 
     <div class="wrapper"> <div class="box header">Header</div> <div class="box sidebar">Sidebar</div> <div class="box content">Content <br /> More content than we had before so this column is now <br /> More content than we had before so this column is now <br /> More content than we had before so this column is now <br /> More content than we had before so this column is now <br /> More content than we had before so this column is nowquite tall.</div> <div class="box footer">Footer</div> </div>