This example is similar to Example 38, except this one will use a Beaver Builder Column as the Grid Container, and the Photo modules will be the Grid Items. So that is why I am using [fl_col] instead of [fl_row].

Edit: I didn't mention this in the video, but I changed the grid-template-columns property to 1fr 1fr for screen sizes less than 500px.

[fl_col] .fl-photo-content, [fl_col] .fl-photo-img {
   width:100%;
   border-radius:10px;
}
[fl_col] {
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    grid-gap:10px;
    grid-auto-flow:dense;
}
[fl_col] .tall {
    grid-row: span 2;
}
[fl_col] .wide {
    grid-column: span 2;
}
[fl_col] .big {
    grid-column: span 2;
    grid-row: span 2;
}
@media screen and (max-width: 500px) {
    [fl_col] {
        grid-template-columns: 1fr 1fr;
    }
}
kitten 1
kitten 2
kitten 3
kitten 4
kitten 5
kitten 6
kitten 7
kitten 8
kitten 9
kitten 10
kitten 11
kitten 12
kitten 13
kitten 14
kitten 15
kitten 16
kitten 17
kitten 18
kitten 19
kitten 20
kitten 21
kitten 22
kitten 23
kitten 24
kitten 25
kitten 26