Use the Post Module to Create a Responsive Modular Grid

Row Content Width: Full-Width Background and Fixed Content Layers

This example expands what I talked about in Example 40, except this one uses the Beaver Builder Post Grid Module as the Grid Container, and the individual posts are the Grid Items.

I take it a step further and have some of the posts spanning two rows or columns (or both!) This creates a really cool modular effect for the entire grid, which is not only responsive but super easy to customize!

The best part is that you don't have to upload images with a specific size or aspect ratio, the CSS does all of the work for you.

Check out my video to see how I made this modular grid using nothing more than the Post Grid Module and CSS. Or just scroll to the bottom to copy the code and use it on your own site. Enjoy!

Modular Grid CSS

:root {
  --normal-width: 300px;
  --normal-height: 200px;
  --gap-size:10px;
  --tall-width: var(--normal-width);
  --tall-height: calc((var(--normal-height) * 2 ) + var(--gap-size));
  --wide-width: calc((var(--normal-width) * 2 ) + var(--gap-size));
  --wide-height: var(--normal-height);
  --big-width: calc((var(--normal-width) * 2 ) + var(--gap-size));
  --big-height: calc((var(--normal-height) * 2 ) + var(--gap-size));
}
[fl_col] .fl-post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--normal-width), 1fr));
    grid-gap:var(--gap-size);
    grid-auto-flow:dense;
}
[fl_col] .fl-post-grid::before, [fl_col] .fl-post-grid::after {
    display:none;
}
[fl_col] .fl-post-grid .fl-post-grid-post {
    border: none;
}
[fl_col] .fl-post-grid .fl-post-grid-post .wp-post-image {
    object-fit:cover;
    width:100%;
    min-width:var(--normal-width);
    height:var(--normal-height);
    border-radius:10px;
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 1) {
    grid-row: span 2;
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 1) .wp-post-image {
    min-width:var(--tall-width);
    height:var(--tall-height);
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 2) {
    grid-column: span 2;
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 2) .wp-post-image {
    min-width:var(--wide-width);
    height:var(--wide-height);
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 6) {
    grid-column: span 2;
    grid-row: span 2;
}
[fl_col] .fl-post-grid .fl-post-column:nth-child(8n + 6) .wp-post-image {
    min-width:var(--big-width);
    height:var(--big-height);
}
@media screen and (max-width: 768px) {
    [fl_col] .fl-post-grid {
        grid-template-columns: 1fr 1fr;
    }
    [fl_col] .fl-post-grid .fl-post-column .wp-post-image {
        min-width:unset!important;
    }
}

Custom Post Layout HTML

[wpbb post:featured_image size="large" display="tag" linked="yes"]
<h2 class="fl-post-title">[wpbb post:link text="title"]</h2>

Custom Post Layout CSS

.fl-post-grid-post {
    position:relative;
}
.fl-post-grid-post::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    background-size: 100% 100%;
    border-radius:10px;
    opacity: 0;
    transition: all 0.3s;
    pointer-events: none;
}
.fl-post-grid-post:hover::before {
    opacity: .7;
    transition: all 0.3s;
}
.fl-post-title {
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align:center;
    font-size:1.3em;
    opacity:0;
    transition: all 0.3s;
}
.fl-post-grid-post:hover .fl-post-title {
    opacity:1;
    transition: all 0.3s;
}
.fl-post-title a {
    color:#ffffff;
}