grid-auto-flow Use the Photo Module to Create a Responsive Modular Grid

Instead of going into your Column Settings to assign a Grid Item Class to each column group, you can save some time by using the nth-child() pseudo-class to assign names to your grid areas. You can use the nth-child() on the .fl-col-group class.

For example:

[fl_row] .fl-col-group:nth-child(1) {grid-area:header;}
[fl_row] .fl-col-group:nth-child(2) {grid-area:content;}
[fl_row] .fl-col-group:nth-child(3) {grid-area:sidebar;}

Please note that this only works in Advanced mode.

[fl_row] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-gap:10px;
    grid-template-areas:
    "hr hr hr hr hr hr"
    "nv nv nv nv nv sl"
    "sb ct ct ct ct ct"
    "ft ft ft ft ft ft";
}
[fl_row] .fl-col-group:nth-child(1) {grid-area:hr;}
[fl_row] .fl-col-group:nth-child(2) {grid-area:nv;}
[fl_row] .fl-col-group:nth-child(3) {grid-area:sl;}
[fl_row] .fl-col-group:nth-child(4) {grid-area:sb;}
[fl_row] .fl-col-group:nth-child(5) {grid-area:ct;}
[fl_row] .fl-col-group:nth-child(6) {grid-area:ft;}
[medium] {
    [fl_row] {
        grid-template-areas:
       "hr hr hr hr hr hr"
       "sb nv nv nv nv nv"
       "sb ct ct ct ct ct"
       "sl sl sl ft ft ft"
    }
}
[small] {
    [fl_row] {
        grid-template-columns: 1fr;
        grid-template-areas:
       "hr"
       "nv"
       "sl"
       "ct"
       "sb"
       "ft"
    }
}