A

B

C

D

E

F

My header

Panel A

Panel B

Panel C

Panel D

Panel E

Panel F

Panel G

Panel H

Panel I

Panel J

My footer 

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: minmax(150px, auto);
}
[fl_row] .tall {
  grid-row-end: span 2;
}
[fl_row] .header, [fl_row] .footer {
    grid-column: 1 / -1;
}

My header

Panel A

Panel B

Panel C

Panel D

Panel E

Panel F

Panel G

Panel H

Panel I

Panel J

My footer 

[fl_row] {
    display:grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: minmax(150px, auto);
}
[fl_row] .header, [fl_row] .footer {
    grid-column: 1 / -1;
}

My header

Using negative space

This example uses line-based positioning, to position the header and footer, stretching them across the grid.

By making the content span a number of rows, we can then space the blocks out next to that content. Each in their own row.

[fl_row] {
    display: grid;
    grid-gap: 10px;
}
[medium-large] {
    [fl_row] {
        grid-template-columns: 1fr 3fr;
        grid-auto-rows: minmax(150px, auto);
    }
    [fl_row] .header, [fl_row] .footer {
        grid-column: 1 / -1;
    }
    [fl_row] .block-a {
        grid-column: 1;
        grid-row: 2;
    }
    [fl_row] .block-b {
        grid-column: 1;
        grid-row: 4;
    }
     [fl_row] .block-c {
        grid-column: 1;
        grid-row: 6;
    }
    [fl_row] .content {
        grid-column: 2;
        grid-row: 2 / 7;
    }
}

Block A

Block B

Block C

Footer

My header

Sidebar

2 column, header and footer

This example uses line-based positioning, to position the header and footer, stretching them across the grid.

[fl_row] {
    grid-template-columns: 1fr 3fr;
    grid-gap: 10px;
}
[fl_row] .header, [fl_row] .footer {
    grid-column: 1 / -1;
}
[small] {
    [fl_row] {
        grid-template-columns: auto;
    }
}

Footer

Title

Masthead

Content 

[fl_row] {
    display: grid;
    grid-gap:5px;
    grid-template-columns:repeat(12, 1fr);
    grid-template-rows: auto max-content auto;
    grid-template-areas:
    "t t t t t t t t t t k k"
    "c c c c c c m m m m m m"
    "c c c c c c s s s f f f";
}
[fl_row] .title {
    grid-area: t;
}
[fl_row] .masthead {
    grid-area: m;
}
[fl_row] .content {
    grid-area: c;
}
[fl_row] .content-2 {
    grid-area: k;
}
[fl_row] .sidebar {
    grid-area: s;
}
[fl_row] .footer {
    grid-area: f;
}
[medium] {
    [fl_row] {
        grid-template-columns:repeat(12, 1fr);
        grid-template-rows: auto max-content auto auto;
        grid-template-areas:
        "t t t t t t t t t t t t"
        "c c c c c c m m m m m m"
        "c c c c c c s s s s s k"
        "f f f f f f f f f f f f";
    }
}
[small] {
    [fl_row] {
        grid-template-columns:repeat(1, 1fr);
        grid-template-rows: auto;
        grid-template-areas:
        "m"
        "t"
        "c"
        "k"
        "s"
        "f";
    }
}

Content 2

Sidebar

Footer