Use the Photo Module to Create a Responsive Modular Grid

Using nth-child() to set up your grid-area Use the Posts Module to Create a Three-Part Horizontal Masonry Grid

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;
    }
}