Use the Photo Module to Create a Responsive Modular Grid Row Content Width: Full-Width Background and Fixed Content

Here is an example of how you can use CSS Grid with the Beaver Builder Posts Module to create different post layouts. In this example, I have three different styles for displaying my posts.

To create the following layout, follow these steps:

  1. Copy the CSS (posted below) to your clipboard.
  2. Drag the Beaver Builder Posts Module into a new row.
  3. In the Module Settings:
    • I set the Post Content Length to 30 words.
    • I also set this Fallback Image, for posts that don't have a Featured Image set.
  4. Click on the Row's Settings, then go to the Advanced tab.
  5. Activate CSS Grid in Advanced Mode
  6. Paste the copied CSS.

Omnis ipsam dolorum repellat odit aut ab

By Ravena | October 20, 2021

Laboriosam eveniet ab nihil. Voluptates amet nihil minima et. Omnis nostrum inventore consequatur perferendis Id vel error ab Fugit molestiae aut aut quisquam ea. repellendus ea sint nihil omnis. Minima…

Voluptatibus ut autem aut labore qui

By Wendy Weel | June 24, 2020

Eius architecto sit quos quia laborum consequatur delectus modi. Debitis error ex natus. Sunt mollitia consequuntur non nam voluptas numquam Itaque distinctio illum animi earum est porro sunt. Et molestiae…

Harum sint rem aut

By Adrian Griffiths | June 24, 2020

Dolorum eligendi fuga tenetur saepe id deleniti tenetur sunt sequi non et sint mollitia distinctio quisquam ipsa aut ea sunt dicta distinctio non doloremque voluptatem officiis magni voluptas consectetur alias nesciunt inventore in corporis rem qui aliquid ut quis distinctio ut mollitia officia aut quia possimus.

A rerum omnis alias quasi veniam

By Patrick Eustis | June 24, 2020

Hic consequatur corrupti non est consectetur blanditiis ad ut atque doloremque et numquam et earum rerum et illum odio voluptatem maiores unde maiores illo dolor id delectus dolor sunt assumenda adipisci quis corrupti rerum error commodi nesciunt nihil exercitationem necessitatibus non voluptatum aut voluptatem maxime eaque quod omnis quia est dolores laborum occaecati quo earum molestias minus et sit unde et perspiciatis corporis fugit quod omnis aut dolores dolores autem soluta blanditiis consequatur in sunt et laborum sed.

Delectus dolores et voluptates iusto pariatur ipsum

By Larah Ritchie | June 24, 2020

Eos nulla ab suscipit maxime minima quia at itaque sed ea itaque illum architecto est porro praesentium sed tempore aut nulla aut mollitia rem ab consectetur molestias laboriosam quia dolorem quidem cupiditate aut quasi qui neque quo dolore dolores reprehenderit cum.

Delectus reiciendis est consequuntur

By Roland Dietz | May 17, 2020

Autem aut omnis et voluptates optio porro est. Totam voluptas tenetur et. Nam reprehenderit voluptate ut aperiam ut Et et ratione ex neque. Placeat illo ut sed enim debitis debitis.…

Load More

Here is the CSS to copy: 

[fl_row] .fl-post-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap:30px;
    grid-auto-rows: 300px;
    width:100%!important;
    height:auto!important;
}
[fl_row] .fl-post-grid::before {
    content:none;
}
[fl_row] .fl-post-grid-post {
    width:100%;
    margin-bottom:0px;
    height:300px;
    overflow:hidden;
    -webkit-box-shadow: 0 18px 24px 0 rgba(0,0,0,.15);
    box-shadow: 0 18px 24px 0 rgba(0,0,0,.15);
}
[fl_row] .fl-post-grid-post .fl-post-grid-text .fl-post-grid-title a {
    font-weight:700;
}
[fl_row] .fl-post-grid .fl-post-grid-sizer {
    display:none;
}
[fl_row] .fl-post-grid::after {
    content:none;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) {
    grid-column: span 7;
}
[fl_row] .fl-post-grid-post:nth-child(5n+2) {
    grid-column: span 5;
}
[fl_row] .fl-post-grid-post:nth-child(5n+3) {
    grid-column: span 5;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) {
    grid-column: span 3;
}
[fl_row] .fl-post-grid-post:nth-child(5n+5) {
    grid-column: span 4;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) {
    display:grid;
    grid-template-columns: 1fr 1fr;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image a::after {
    content: "";
    position: absolute;
    background: rgba(0,0,0,0);
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    will-change: background;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) div[itemprop] {
    grid-area: 1/1/2/3;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image {
    grid-area: 1/1/2/2;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image:hover a::after {
    background: rgba(0,0,0,.2);
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image img,
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-image img {
    height:100%!important;
    object-fit:cover;
}
[fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text {
    grid-area: 1/2/2/3;
}
[fl_row] .fl-post-grid-post .fl-post-grid-meta a {
    color:rgba(66,139,202,1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post .fl-post-grid-meta a:hover {
    color:rgba(66,139,202,.8);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post:nth-child(5n+2) .fl-post-grid-image,
[fl_row] .fl-post-grid-post:nth-child(5n+3) .fl-post-grid-image,
[fl_row] .fl-post-grid-post:nth-child(5n+5) .fl-post-grid-image {
    display:none;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) {
    display:grid;
    grid-column: 1fr;
    grid-row: auto;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-image,
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text,
[fl_row] .fl-post-grid-post:nth-child(5n+4) div[itemprop] {
    grid-area: 1/1/2/2;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text {
    z-index:3;
    pointer-events: none;
    color:#ffffff;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text a {
    color:rgba(110,185,255,.8);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text a:hover {
    color:rgba(110,185,255,1);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text .fl-post-grid-title,
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text .fl-post-grid-meta {
    pointer-events: auto;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text .fl-post-grid-content {
    display:none;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-text .fl-post-grid-title a {
    color:#ffffff;
    z-index:2;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4) .fl-post-grid-image a::after {
    content: "";
    position: absolute;
    background: rgba(0,0,0,.4);
    will-change: background;
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post:nth-child(5n+4):hover .fl-post-grid-image a::after {
    background: rgba(0,0,0,.6);
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
[fl_row] .fl-post-grid-post[style] {
    position: relative!important;
    left: unset!important;
    top: unset!important;
}
@media screen and (min-width:580px) and (max-width:1023px) {
    [fl_row] .fl-post-grid-post:nth-child(5n+1) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+2) {
        grid-column: span 6;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+3) {
        grid-column: span 6;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+4) {
        grid-column: span 6;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+5) {
        grid-column: span 6;
    }
}
@media screen and (max-width:579px) {
    [fl_row] .fl-post-grid-post:nth-child(5n+1) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+2) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+3) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+4) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+5) {
        grid-column: span 12;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image,
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text,
    [fl_row] .fl-post-grid-post:nth-child(5n+1) div[itemprop] {
        grid-area: 1/1/-1/-1;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text {
        z-index:3;
        pointer-events: none;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text .fl-post-grid-title,
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text .fl-post-grid-meta {
        pointer-events: auto;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text .fl-post-grid-content {
        display:none;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text .fl-post-grid-title a {
        color:#ffffff;
        z-index:2;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-image a::after {
        content: "";
        position: absolute;
        background: rgba(0,0,0,.4);
        will-change: background;
        height: 100%;
        width: 100%;
        z-index: 2;
        top: 0;
        left: 0;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1):hover .fl-post-grid-image a::after {
        background: rgba(0,0,0,.6);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text {
        color:#ffffff;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text a {
        color:rgba(110,185,255,.8);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    [fl_row] .fl-post-grid-post:nth-child(5n+1) .fl-post-grid-text a:hover {
        color:rgba(110,185,255,1);
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        -ms-transition: all .2s ease-in-out;
        -o-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
}