Use the Posts Module to Create a Three-Part Horizontal Masonry Grid
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:
- Copy the CSS (posted below) to your clipboard.
- Drag the Beaver Builder Posts Module into a new row.
- 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.
- Click on the Row's Settings, then go to the Advanced tab.
- Activate CSS Grid in Advanced Mode
- Paste the copied CSS.
Odio ipsa dolorem eaque
Fugiat voluptatem dicta dolor est doloribus et id qui eum amet rerum eum fuga ratione eius voluptatem sit aut quia quia accusamus eum dicta aliquam consequatur odio qui harum ab totam aperiam sit aspernatur et amet occaecati.
Ea aliquid rerum eveniet eius
Commodi labore quasi commodi Sunt architecto at animi Dicta modi aut animi beatae amet Officia tempora qui debitis ut id veritatis perspiciatis Enim omnis eveniet eos Enim aut saepe voluptatibus…
Optio officiis id maiores impedit
Voluptatem cumque atque voluptatem molestiae assumenda dolores omnis illo aut ut et placeat et explicabo maxime consequuntur officiis suscipit vitae dolores deserunt qui fugit enim ut voluptatibus soluta aut nihil qui laudantium ut reprehenderit aut modi qui suscipit dolores vitae at et mollitia sapiente voluptatem veniam deserunt nostrum et veritatis voluptatem quia ad blanditiis dolorum id amet neque excepturi laudantium dolores assumenda tenetur earum voluptatem sit eaque dolore facere numquam maiores et consequatur modi omnis velit et consequatur adipisci voluptatem recusandae placeat qui maiores.
Et facilis quia placeat omnis dolorum quas delectus omnis error odio aut dolor sint quae reprehenderit totam et impedit excepturi possimus autem maiores rerum dolorem blanditiis ipsam sit qui et ad voluptate dolor natus laboriosam nemo veniam quam id porro deserunt excepturi blanditiis tenetur labore et quia quia necessitatibus sequi ducimus suscipit sint perferendis fuga iusto officia non alias iste et minima et deleniti perferendis minima iure eos architecto sequi enim quas corrupti debitis est aut doloribus quibusdam voluptates reiciendis totam enim sed quod voluptatem molestiae rem excepturi fugit veniam voluptatem vitae cumque doloribus eos at quo.
Nihil aut accusamus laboriosam eum provident nesciunt dignissimos nemo architecto eum dolorem excepturi qui maxime minus deleniti veritatis sunt cupiditate eos et et et ab veritatis earum illo dignissimos et soluta magni eum debitis qui sit quos voluptatem facere eligendi id rerum consequatur omnis nostrum quidem nemo facere et ut ut et magni labore eos delectus aut ratione vero error sed accusantium eum error consequatur sunt occaecati est pariatur non dolorem ex.
Corporis et perferendis consectetur esse voluptatem velit
In animi iure aspernatur ea est in tempore voluptas consequatur unde aut quos magni natus dolorum dolorum ut nihil sit aperiam cumque nesciunt hic minus numquam culpa adipisci id reiciendis omnis est quasi quasi saepe omnis quos rerum reprehenderit voluptates impedit porro voluptatum tenetur facilis illo blanditiis modi sint saepe ullam totam eveniet impedit cupiditate voluptatem non vel aut consequuntur omnis dolor qui sit voluptate qui aspernatur quis sit placeat ratione aut exercitationem repellat modi reprehenderit et rerum omnis ut et officia amet minus consequatur magnam earum occaecati vero cumque dolor sint delectus dignissimos cupiditate quis.
Quia delectus nostrum voluptates est et sint earum blanditiis eos voluptatum dolor laborum repellendus ipsam et aut culpa molestiae quod iste quam nihil aut et et cupiditate consequatur omnis repellat esse qui doloremque saepe id ut ex minima fugiat neque hic illo voluptatem ut dignissimos odio repudiandae ipsa quisquam tenetur velit consequuntur earum vel quia eos aliquid qui provident aliquam eius nisi rerum eius nihil consequatur eligendi autem totam est unde asperiores nisi neque mollitia et quam tenetur qui autem exercitationem.
Voluptas esse nemo facere rerum occaecati dolorem perspiciatis animi iusto sequi dolorum beatae quam pariatur esse praesentium optio omnis ea eos aut reiciendis voluptas ad dolore nemo est minus exercitationem quaerat pariatur maxime qui non iure rerum eaque veritatis pariatur nostrum voluptate nihil omnis eos dolorem officia a porro impedit et voluptatem voluptas libero animi similique adipisci est exercitationem amet reiciendis error suscipit vitae earum tempore dolor quia qui id autem optio deserunt qui qui qui dolor voluptates et aut et dolores nihil et non aspernatur nesciunt adipisci minima ut consequatur.
Perspiciatis et enim veritatis et
Ipsa sequi culpa quisquam harum enim quibusdam officia occaecati debitis voluptate voluptas inventore repellat consequuntur dolor odit voluptates quia et corporis aut ut iste non in et cum eius vitae non explicabo mollitia qui quo reprehenderit pariatur quos laboriosam aspernatur voluptas qui accusantium commodi omnis quisquam numquam fugiat et accusantium in omnis ut aut ratione qui et vel ratione corrupti provident illum velit id repudiandae omnis quia culpa unde voluptatem quia ea eum eum accusamus vel.
Est necessitatibus fuga accusamus magni voluptas officia minus iure consequuntur nisi repellat facere sit quis laborum laborum est minus fugit fugiat odit praesentium est voluptates quis ex adipisci adipisci repudiandae a voluptates dicta voluptatum architecto velit sint odio vero iste minus eos nesciunt repudiandae cupiditate in laudantium beatae velit aut dolor ipsum est esse ipsa quos architecto qui omnis quidem officiis aut corrupti delectus porro qui deserunt hic.
Perspiciatis mollitia iure libero minima harum accusamus laudantium et id officiis minima dolor et est consequuntur dolorem provident eligendi omnis reiciendis non voluptas cumque quia dolorum laborum nulla quae repellendus asperiores alias aut velit et explicabo molestiae dolorum rerum molestiae cupiditate molestiae cum esse ipsam aut velit id doloribus reprehenderit repellat perferendis ut qui harum ea voluptates architecto inventore quia quaerat saepe saepe animi quam aut et aut quidem velit eum non exercitationem autem facilis omnis ut dolores eos quo corrupti omnis molestias beatae.
Tempore dolores ipsa aut placeat
Voluptas ea blanditiis fugiat vel velit voluptas nisi occaecati voluptatum doloribus fugit molestiae nam qui ducimus similique voluptatum deleniti autem sint officia et dolores molestias voluptatum asperiores sed exercitationem laboriosam optio dolore modi deserunt architecto exercitationem qui magnam cumque quia reiciendis aut voluptatem iusto nihil assumenda quasi atque ut earum non ullam deserunt dolorem earum iusto doloremque quas sunt voluptatem aspernatur ipsa magnam perspiciatis.
Enim eos eos est iure minima et consectetur qui at est rem quam deserunt expedita perspiciatis quae in eligendi ratione vel laborum eligendi exercitationem tenetur quia libero mollitia architecto eligendi aut est adipisci dolores fugiat voluptate dolores corrupti dolorum fugiat consequatur et doloribus dolore placeat iure illum minus distinctio nobis ullam quo molestias sunt et totam maiores distinctio ab non dolorem adipisci at.
Dolor excepturi perspiciatis fugit voluptatibus reiciendis quis et occaecati deleniti esse omnis assumenda omnis dignissimos maiores enim omnis mollitia minus dolores libero corporis sint expedita labore quos mollitia qui aperiam est minus dolores nemo et labore sit aspernatur perferendis explicabo vel ut corporis corrupti animi qui optio voluptatum quia quam vitae consequatur animi nisi nisi illo aut vel veritatis porro corrupti assumenda.
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;
}
}