* This tutorial will work for the default portfolio modules that come with Divi and our Portfolio Posts Pro plugin modules. Our latest plugin, Divi FilterGrid, makes it even easier to change the columns. We’ve added an option directly in the module settings for this plugin that allows you to define the number of columns for each screen size.
Change the portfolio grid columns in your Divi child theme
In our example, we add the following class three-column-grid to our module. Then in our child theme’s stylesheet, we added the following CSS:
/* THREE COLUMN PORTFOLIO GRID LAYOUT */
@media only screen and ( min-width: 768px ) {
.three-column-grid .et_pb_grid_item {
width: 28.333% !important;
margin: 0 7.5% 7.5% 0 !important;
}
.three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}
.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
}
That’s it! Notice we are only changing the layout to three columns when the browser window is at least 767px. This is because Divi’s default CSS will take over from 767px on down and change the grid to two columns and then down to one column on mobile.
And here’s the resulting three column layout:
If you see an issue at either of the two breakpoints, it’s usually caused by a single post that applies to both the 3n+1 and 4n+1 rule. You can override a single item like this:
@media only screen and ( min-width: 768px ) and ( max-width: 980px ) {
.three-column-grid .et_pb_grid_item:nth-child(61) {
clear: left !important;
}
}
This should override the clear value for the 61st post in the grid but only when the screen size is between 768px and 980px. You’ll just need to change the 61 value to match the post number you’re having issues with.
Hi,
I have set up the portfolio grid to show 5 columns and it looks great however on of the titles is long than the others and mis-aligns the grid items for the following line. This isn’t an issue with the original divi grid settings.
I have tried adjusting the padding and margins with CSS but it hasnt resolved the issue. Are you able to assist?
You can see the issue at the bottom of this page – https://pallmallmc.com/project/strategic-advisory/
Many thanks
Hi Kathryn. You have a few options here. You can either add a minimum height to each grid item:
.et_pb_grid_item {
min-height: 240px;
}
Or you can add a clear rule to every fifth item:
.et_pb_grid_item:nth-child(5n) {
clear: left;
}
Keep in mind if you add the clear left rule, you’ll want to limit it to large screen sizes like I did in the example above.
Perfect! Thank you so much Brad, worked a treat!
I have the 3 column layout, how to reduce the white space between the columns?
I would like just a thin line between the pictures.
Thank you.
Hi Kimberley. You would just modify the values in the CSS. Specifically you would change this:
margin: 0 7.5% 7.5% 0 !important;
to something like this:
margin: 0 1% 7.5% 0 !important;
Just make sure if you change the right margin like above, you also change the width so that the total between width and margin equal 100 or come very close without going over. The formula would be (width x 3) + (right margin x 2) = 100
So if you change the right margin to 1%, you would change the width to 32.666px
When I do this; the first page of the posts look as they should. However, when I click over to Page 2 and 3 of my Filterable Portfolio — some are really close together, others are more spaced out. Please advise.
Hi Elyse. We modified the CSS to account for when a post doesn’t have a featured image. Please try that and let us know if you’re still having issues.
This did work. Thank you for the quick reply and fix!
Hi
I have a custom field in my posts. Can I pull it into this portfolio module to appear next to the excerpt?
NO need to answer that – Ive just found where to do it! Thank you 🙂
Can you tell me how to do this with 5 and 6 columns. I cannot seem to get the nth elements correct. I get 4 then 3 then random columns in the 5 column set.
Hi! I’ve applied this code and it works great, but in a smartphone screen the grid goes to 2 columns instead of 1 —I think it would be better. How can we set it to 1 column in smartphones without changing the other media?
Hi Maties. The CSS above is wrapped in a media query that limits it to only apply to screen sizes 768px or above. It will not affect smartphone screens if applied correctly. So make sure you have copied the code in its entirety.
If you still see two columns on mobile, you may need to update your version of Divi. For a brief period, Elegant Themes decided to split the columns of the portfolio modules (which is what our plugin is based on) into two on mobile instead of one. But newer versions fixed this and changed it back to the original single column on mobile.
If you have the latest version of Divi, I would clear your caches on your site and in your browser and check your Custom CSS or child theme’s CSS. You may have custom code that is causing this.
I recently purchased the portfolio posts pro and was wondering how to make the filterable tab come up on the module like the original portfolio module does?
Hi Richard. Make sure you choose the DP Filterable Blog module. This is the module that will display the filters across the top. If that doesn’t work, please submit a support ticket and we’ll find out what the issue is.
Hi
I have just applied this code and it works great. I have reduced the reduced the white space inbetween the columns to 0% and increase the width to 33.333px, so all good there.
But I want to make the padding inbetween the rows of the portfolio 0% as well. Adjusting the padding doesnt seem to be doing it. Any ideas?
Thanks
My first thought would be to change the gutter spacing in the row to 0. That should remove the empty space between each portfolio item. If that doesn’t work, send me the URL to the page you’re having issues with and I’ll take a look.
Does this work for large number of posts? I am using this to display products in three column portfolio, but the 25th product sits alone in the center of the row and the 26th and 27th product are on their own on the left of the row. The same happens again for the 73nd product and the 74th and 75th product. It does not occur again within the 105 products I’m displaying. It appears to be related to the CSS
.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
but I can’t quite get a handle on what’s happening. Any advice?
The layout issue is partial impacted by a private product. Without the private product, I still have the layout issue at item 73. Weird.
That is very strange Patrick. Can you share the URL you’re seeing this issue? You can send it via our contact form if you prefer to not share in comments and we would be happy to take a look.
Hi Brad & Patrick,
We are seeing the same issue on one of our sites, but it’s the 13th product that is throwing off the layout. It was working before, but I’m guessing a recent Divi update changed something…
Were you guys able to figure out how to resolve the issue?
Here’s the page where it’s happening for us:
https://mauifoodbank.org/events/
Thanks!
Never mind — I think I figured it out! It appeared to be due to the 13th item being a common denominator of (3n+1) and (4n+1). This seemed to fix the issue:
.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset!important; /* clears the 4 column grid settings */
}
.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: both!important; /* then overrides it with the 3 column grid settings */
}
Thanks Taloha! Yeah, when displaying a large number of posts there can be some conflicts at certain posts in the grid. It’s really strange b/c it seems to be different posts for different sites. I’m not seeing any issues on the 13th item but am on the 61st item. I think for most people the original code will work, but I did add the disclaimer that grids displaying a large number of posts might have issues. And provided example code on how you can target a specific item in the grid. Thanks again!
I wanted to say mahalo to TAloha for the updated CSS. It seems to have fixed all of my three column display issues. (P.S. I am also on Maui.)
Hello. I used this code in a website and the images are not sharp, when I use the Grid as 3 columns.
The images are very big, from a photograph.
Why its happens? How can I send you the link to the web?
Thanks
Hi Christina! I responded to your email. This is happening on your site b/c you’ve removed the space between each image and you’re using a fullwidth row. So the images take up a lot of space, but they are only 400 x 284 thumbnails so they appear pixelated. If you’re using our plugin, you can simply change the thumbnail size from within the module settings to load a larger thumbnail. If you’re using the default portfolio module that comes with Divi, you’ll need to add code to your functions.php file to change the size of the thumbnail – http://www.eleganttweaks.com/divi/changing-portfolio-blog-module-thumbnail-sizes/
Using this css and it works great, my only question is if there is a way to center the last item. I currently have 16 projects in my portfolio, so item 16 is on the left with 2 blank spaces. My client would like to have the last project centered, but no css changes seem to affect this. Any help would be greatly appreciated.
I think you could probably manage this with flexbox using justify-content: center but would require a lot of modification. Here is more info on flexbox – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout. If you need help with this layout, please create a support ticket and we would be happy to send you the custom CSS for this.