No clearing required Source Independence

We can easily redefine the grid and the position of the elements on it using Media Queries. I define the Grid Areas as before outside of the Media Queries and then redefine the Grid Tracks and the position of the elements onto that grid inside my Media Queries.

Credit to gridbyexample.com for inspiring this example.

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
    grid-template-areas:
    "header"
    "sidebar"
    "content"
    "sidebar2"
    "footer";
}
[fl_row] .header {
    grid-area: header;
}
[fl_row] .sidebar {
    grid-area: sidebar;
}
[fl_row] .sidebar2 {
    grid-area: sidebar2;
}
[fl_row] .content {
    grid-area: content;
}
[fl_row] .footer {
    grid-area: footer;
}
@media only screen and (min-width: 500px) {
    [fl_row] {
        grid-template-columns: 25% auto;
        grid-template-areas:
        "header   header"
        "sidebar  content"
        "sidebar2 sidebar2"
        "footer   footer";
    }
}
@media only screen and (min-width: 600px) {
    [fl_row] {
        grid-gap: 10px;
        grid-template-columns: auto auto auto;
        grid-template-areas:
        "header  header  header"
        "sidebar content sidebar2"
        "footer  footer  footer";
    }
}

Header

Sidebar

Sidebar 2

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.