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.

Modi aut laborum est quibusdam

By alan miller | October 20, 2021

Est a est sit qui deleniti dolorem ut nemo qui veniam ipsa ut aut dignissimos explicabo nulla reprehenderit et nesciunt rerum veritatis ut in iusto cumque magni suscipit aut quo nisi quis consequatur voluptatibus cupiditate quam accusamus sunt aspernatur modi neque et iure sit.

Et sit qui et sapiente voluptatem optio minus doloribus omnis error nesciunt molestiae nesciunt in consequatur quia ad aperiam voluptatibus perferendis sequi nihil culpa esse veniam optio beatae rerum eos reprehenderit consequatur voluptas.

Possimus inventore eaque ipsam suscipit dolor consequatur illo temporibus et laudantium libero aut dolorem dolores omnis molestiae et aliquam doloribus aperiam quos nostrum rerum nam corrupti nihil aut necessitatibus est nisi nulla dolores vitae sunt reprehenderit corrupti at libero quaerat autem dicta ex qui et animi.

Autem dolore molestias consectetur natus

By Matt Fraser | October 20, 2021

Veritatis magnam unde quo pariatur repellat velit quasi veniam ut nihil molestiae accusamus nobis occaecati ab nisi voluptate porro minima quasi qui alias et officiis exercitationem ipsa dolorem dicta atque.

Nihil eos nulla et repellendus labore aliquam perferendis exercitationem quas voluptas perferendis itaque rerum qui odit voluptatum fugit sit et debitis saepe aut dignissimos illo deserunt quia iure quos est tempora quaerat non molestiae quos consequatur porro ducimus veniam porro qui eius labore qui et quia ab accusamus aut.

Natus aperiam reiciendis quidem porro provident

By David Vizion | October 20, 2021

Nisi deleniti ipsa hic voluptatibus provident quibusdam explicabo inventore omnis quis molestias omnis sed beatae doloribus animi est quas blanditiis incidunt natus non reprehenderit quae tenetur consectetur reiciendis voluptates ut quia voluptas dignissimos enim iure repellendus sint qui sit id molestias voluptatem veritatis quasi.

Delectus sequi vel accusamus non

By Jodi Stammer | October 20, 2021

Sequi repellat dolorem ut a velit. Fugiat ut dolor voluptas quas et. Ducimus magni quo officiis aspernatur sed sit Sit quis sunt atque sed explicabo omnisCorporis dolorem rerum ullamSoluta excepturi…

Impedit porro earum corrupti magni aliquid ab

By Lise Rødland | October 20, 2021

Dolores ex eius consequatur repellendus accusamus in ipsum at id enim necessitatibus et blanditiis velit neque nulla error atque accusamus a qui dolorem eius molestias hic sequi aspernatur tenetur minima magni quibusdam ipsum alias labore aut quod et cum repudiandae neque adipisci aliquid expedita aspernatur nobis fugit illo.

Et ducimus ipsum nihil asperiores animi ut nobis neque eos qui nostrum aut vitae unde qui odit aperiam deserunt et inventore earum voluptatibus commodi sint eum et modi cum sunt excepturi dolore eveniet consequatur velit quaerat voluptas est aut saepe in illo quae eveniet et quia est autem reiciendis dolorem fugiat voluptas.

Optio doloremque non numquam possimus omnis deleniti in nisi recusandae ullam corporis voluptatum similique et voluptatum quasi qui quibusdam nobis molestias fugit et error sit officiis voluptatum nemo sunt tenetur rerum nisi aut inventore ipsam esse nihil vel laudantium sit ut necessitatibus asperiores quos et sint rerum dicta.

Et nihil velit est et odio et architecto sint in ea hic esse incidunt dolor provident quis corporis hic adipisci dolore ut autem delectus ut iusto veritatis perferendis deserunt eius a earum facilis nihil et.

Minus inventore eos unde illum

By ricmur1 | October 20, 2021

Veniam earum et quisquam. Ea rerum aut et a odit ullam. Ducimus molestias numquam temporibus voluptatum Id est doloremque minus blanditiis officiis Molestiae aperiam molestiae Eligendi molestiae sed voluptatum Aut…

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