Defining Grid Areas Redefining Grid Areas with Media Queries

If I add a footer to my markup and define a grid-area and place it on the grid using grid-template-areas you can see that it sits below the content column. There is no clearing required as this footer has a track on the grid, it can’t hop up into another track.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: 1fr  1fr  1fr;
    grid-template-areas:
    "....... header  header"
    "sidebar content content"
    "footer  footer  footer";
}
[fl_row] .header {
    grid-area: header;
}
[fl_row] .sidebar {
    grid-area: sidebar;
}
[fl_row] .content {
    grid-area: content;
}
[fl_row] .footer {
    grid-area: footer;
}

Header

Sidebar

Footer

Content

More content than we had before so this column is now quite tall.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie felis eu mauris aliquet lacinia. Sed fermentum tortor et urna condimentum bibendum. Etiam semper sodales arcu, et elementum turpis volutpat vitae. Mauris fringilla tellus in metus vestibulum iaculis. Proin lacinia velit turpis, in feugiat ex vehicula a. Sed gravida fringilla pretium. Proin quis leo cursus, faucibus quam eu, scelerisque libero. In hac habitasse platea dictumst.

Maecenas lacus nibh, fringilla porttitor lacinia consequat, cursus eget enim. Curabitur eu egestas turpis, et rutrum ligula. Suspendisse quam ex, semper ut cursus in, eleifend eget turpis. Cras aliquet consectetur mauris, vehicula lacinia sem mattis eu. Sed lacinia erat justo, sit amet venenatis erat pellentesque ac. Morbi lobortis, sem eu mollis bibendum, lacus elit sodales odio, ac dapibus enim augue sed sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam vitae pretium turpis, sit amet finibus eros. Sed risus magna, mattis vitae lacus at, vehicula vestibulum purus.