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.

Accusantium minus ipsum recusandae totam velit

By Chris Johnston | May 17, 2020

Quidem esse rem nulla voluptatum in ea nulla. Quos et eligendi repellendus laboriosam quia in consequatur Sunt tempora deserunt aut eveniet. Repellendus voluptatem mollitia voluptatem molestias ab Aperiam porro et…

Sit nihil aut consequatur veniam

By Hideki Otsuka | May 17, 2020

Odio iusto dignissimos saepe fugiat corporis. Sint maiores et id distinctio. Dolor necessitatibus expedita dolorum eius aliquid rerum esse Vel sed voluptas commodi consectetur et commodi architecto Ea magnam et…

Est animi dolor et et

By Colyns Ehys | May 17, 2020

Qui ea cupiditate non quaerat est vero. Ut culpa placeat minus sed hic repellendus culpa. Consequatur ipsa non quia. Ipsum sed quia sed maiores Velit dolorem voluptatem eius corrupti sequi…

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