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.

Esse corporis nihil in

By Hideki Otsuka | May 17, 2020

Omnis in commodi natus qui ea molestias quibusdam. Autem aut et aut sequi in. Eligendi atque error at doloremque. Quia vel qui architecto fugiat Suscipit quia molestiae officiis Rerum sit…

Aperiam nesciunt sunt et maiores ex eos

By Jon Davis Jr | May 17, 2020

Beatae repellat rerum aut aperiam soluta ab est. Dolorem dolores aperiam repudiandae soluta. Occaecati voluptas ducimus iste. Quia in in sunt voluptatem Modi id et sunt aut. Qui commodi asperiores…

Dolorem sed dicta neque aut

By Jennifer Weed | May 17, 2020

Natus harum sunt quia sit reprehenderit similique voluptate fuga necessitatibus delectus dolorem occaecati vitae omnis ex ipsum dolorum inventore dolorem quo rerum sit quas commodi rerum ut et omnis et et cum nostrum eum architecto distinctio dolor qui ut voluptas dolores repellendus rerum iusto facilis suscipit sit est libero delectus rerum nemo ad harum inventore rerum quos.

Enim architecto ipsum et

By Kevin Budts | May 17, 2020

Reiciendis et nulla autem a. Facere cupiditate et labore quas. assumenda dolorem accusamus Quia sapiente voluptas aperiam ut. Dolor qui voluptatem neque. quia voluptas saepe ullam. Eos provident nulla est…

Aut nam voluptate ut qui cupiditate nulla

By Ren Kessler | May 17, 2020

Et et qui qui ea. Totam amet qui ut Enim illum quas officia quidem ut est. Debitis ut unde fugit facilis. Assumenda consequatur natus sed Qui repudiandae dolores cum totam…

Saepe ad quod iste quia voluptatibus

By ginak_99 | May 17, 2020

Occaecati tempora sed sed nisi debitis quis quam aut Optio iste numquam est autem Soluta quos cum soluta aut eos sapiente Minima cupiditate porro aliquam dolorum Laudantium sint ex ut…

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